CodeS-SourceS
Rechercher un code, un tuto, une réponse

contrôler les evênements sur les eléments

Octobre 2017


les Evênements sur les Eléments

introduction


Il existe plusieurs possiblilté d'ajouter des evenements dans une page nous allons voir quelles sont ces possibilité et a quelle moment utiliser ces possibilité nous travaillerons essentiel avec l'evenement onload mais si il s'agisait d'un autre evenement se serait la meme chose.


l'évênement onload comme son nom l'indique se produit lorsque le document HTML est chargé il permet de lancer des fonction juste apres le chargement du document HTML

1° dans la balise


dans l'exemple qui suit l'evenement est place dans la partie html directement dans la balise body




<html
<head>
<script type= "text/javascript">
var tmp;

function trt1(p1) {
tmp=1;
alert(p1);
}

function trt2(evt)
{
tmp=2;
alert(event.type);
}
</script>
</head>

<body onload='trt1('bonjour');trt2(event)''>

</body>
</html>


pour lancer plusieurs fonctions il suffit d'ajouter un point vigule a la suite de chaque fonction. Pour chaque fonction on peut rajouter des parametres qui peuvent être une chaine de carractere, une valeur numérique, le parametre event, et le parametre this qui correspond a l'element declancheur.

Cette méthode fonctionnement parfaitement bien mais pour une question de lisibilité on préfère séparer le html le javascript et le css

2° création en dynamique


window.onload=fonction

par exemple :

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

function trt1(p1) { 
  tmp=1;
 alert(p1); 
}

function trt2(evt)
 {
 tmp=2;
 
 window.attachEvent  ?  alert(window.event.srcElement) : alert(evt.currentTarget);

 }

function init(event){
alert('page chargée'); 
trt1('test'); 
tmp=0; 

trt2(event);
}

window.onload=init;

</script>
</head>

<body>

</body></html>


afin d'eviter d'utiliser une fonction d'initialisation on peut passer par une fonction annonyme.

la fonction annonyme window.onload=function() { des instructions javascript; };

<script type="text/javascript">
 window.onload=function() { 

  trt1('test'); 

 alert('page chargée');

trt2('exemple');
}


avantage:

simple a mettre en oeuvre et très pratique pour un élément qui n'a besoin que de l'venement qu'on lui a assigne.

inconvénient:

L'inconvénient c'est que durant le chargement de la page c'est a dire avant le déclenchement de l'évènement onload si on a plusieurs évènements onload dans le js seul le dernier évènement onload sera exécute car l'on écrase les autres évènements qui pouvaient avoir été définies au préalable pour cet évènement, Pour remédier au problème on doit créer une fonction init afin de lancer toutes les fonctions devant être lancé apres chargement de la page chose extrêmement lourd , Si on devait insérer plusieurs scripts d'horizon différentes il faudrait a chaque fois supprimer l'évènement onload qui lance le script et modifier la fonction d'initialisation globale afin de prendre en compte tous les scripts et si il fallait supprimer un script il faudrait ainsi modifier la fonction d'initialisation.

il y a aussi le fait que l'on ne peut pas retirer l'évènement au mieux on redéclare l'évènement ce qui a pour effet d'écraser l'ancien évènement et on adjoint un chaine vide a la place d'une fonction.

mon_element.onclick=""


un autre inconvenient mais qui concerne uniquement ie8 et < c'est le paramètre event qui n'est pas transmis.

3° ajout en dynamique


attachEvent ou addEventListener

attachEvent est compatible uniquement avec les version de internet explorer 8 et inferieur quand a addEventListener c'est le standard il fonctionnne avec tous les autres navigateurs ainsi que internet explorer a partir de la version 9.

Ces methodes resoud le probleme d'ecrasement puisque comme leur nom le laisse a pensé elle rajoute un evenement onload a la page sans écraser le precedent.onload.

par exemple:
 <script type ="text/javascript">

  if ( window.attachEvent ){
 window.attachEvent
 ( "onload", script1() );
}
else{
 window.addEventListener
 ( "load", script1, false );
}

  if ( window.attachEvent ){
 window.attachEvent
 ( "onload", script2() );
}
else{
 window.addEventListener
 ( "load", script2, false );
}

  if ( window.attachEvent ){
 window.attachEvent
 ( "onload", script3() );
}
else{
 window.addEventListener
 ( "load", script3, false );
}

</script>


on peut simplifier la syntaxe en utilisant les operateurs ternaires

window.attachEvent  ?  window.attachEvent( "onload", script1() ) :  window.addEventListener( "load", script1, false );

window.attachEvent  ?  window.attachEvent( "onload", script2() ) :  window.addEventListener( "load", script2, false );

window.attachEvent  ?  window.attachEvent( "onload", script3() ) :  window.addEventListener( "load", script3, false );



et si on veut ajouter des paramètres chose qui reste rare on fait comme précédemment en passant par une fonction anonyme.

 <script type="text/javascript">
         if ( window.attachEvent ) 
           window.attachEvent  ( "onload",
                    function()
                    { trt1('test'); 
                     tmp=0; 
                     alert('page chargée'); 
                     trt2('exemple');
                    }  
                   );
         else  window.addEventListener (  "load", 
                    function()
                    { trt1('test'); 
                     tmp=0; 
                     alert('page chargée'); 
                     trt2('exemple');
                    }, 
                    false 
                   );
        </script>       


avantage :

vos script serons plus indépendant et si une personne tierce doit insérer vos scripts dans une page elle n'aura pas a mettre la mains dans le cambouis

4° suppression en dynamique


le fait d'utiliser la méthode précédente permet aussi de supprimer un évènement pour une fonction sans pour autant supprimer l'évènement pour d'autres fonction qui en dépendrait elle fait appel a removeEventListener le standard et detachEvent pour internet explorer 8 et inférieur.


if (window.attachEvent){

element.detachEvent('onmousemove', la_fonction)
}

else{

element.removeEventListener('mousemove', la_fonction, false);
} 

conclusion


à vous de choisir ce qui, sera le mieux adapté dans votre contexte,
pour une application donnée tel méthodes conviendra mieux que l' autre methode

ça ne change rien si on met le JavaScript dans un fichier .js
Publié par cs_bultez.
Ce document intitulé «  contrôler les evênements sur les eléments  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Création d'un éditeur wysiwyg
Extjs, mini tuto et interraction avec une base de données