contrôler les evênements sur les eléments
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