Assigner un événement DOM 2 - Cours Javascript

Introduction

Info

Dans ce cours javascript, nous allons nous pencher sur une aute manière d'assigner un événement en javascript.
Nous allons utiliser le modèle d'événement du DOM 2.
Le modèle d'événement du DOM 2 utilise deux méthodes, addEventListener et removeEventListener, qui permettent assigner ou d'enlever un gestionnaire d'événement à un objet javascript.

Je vous conseille de lire avant le chapitre "Assigner un événement".

Dom 2 Events (fr)

La méthode addEventListener

Définition

la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) permet d'assigner un événement à un objet javascript.

la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) accepte comme paramètres :
- nomEvent, valeur de type String qui spécifie le nom de l'événement sans le "on",
- nomFonction, nom de la fonction sans les "()" qui va traiter l'événement,
- typePropagation, valeur de type Boolean qui spécifie le type de propagation de l'événement.
Code html :
Exemple de code :
<div id="idevement">Mon évènement javascript <img src="monimage.gif" ></div>

Code javascript :
Exemple de code :
function action(event){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.addEventListener("click", action, false);

La méthode attachEvent

Définition

Comme nous le savons bien Internet Explorer ne fais pas comme tout le monde.
La méthode javascript addEventListener n'est pas reconnue, il utilise attachEvent(NomEvent,nomFonction).

La méthode javascript attachEvent(nomEvent, nomFonction) accepte comme paramètres :
- nomEvent, valeur de type String qui spécifie le nom de l'événement avec le "on",
- nomFonction, nom de la fonction sans les "()" qui va traiter l'événement,
Code html :
Exemple de code :
<div id="idevement">Mon événement javascript <img src="monimage.gif" ></div>

Code javascript :
Exemple de code :
function action(event){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.attachEvent("onclick", action);

Fusion des deux méthodes

Infos

Pour que cela fonction vous devez faire un test :
Code html :
Exemple de code :
<div id="idevement">Mon événement javascript <img src="monimage.gif"></div>

Code javascript :
Exemple de code :
function action(event){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
if(momoElement.addEventListener){
  momoElement.addEventListener("click", action, false);
}else if(momoElement.attachEvent){
  momoElement.attachEvent("onclick", action);
}

Mais vous pouvez regrouper ce test dans une fonction :
Exemple de code :
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
  if (objet.addEventListener) {
    objet.addEventListener(typeEvent, nomFunction, typePropagation);
  } else if (objet.attachEvent) {
  objet.attachEvent('on' + typeEvent, nomFunction);
  }
}
function action(event){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);

Exemple :
Mon événement javascript

Supprimer un événement

Définition

Pour Netscape (FireFox,Mozilla) vous devez utiliser la
méthode javascript removeEventListener, pour Internet Explorer vous devez utiliser detachEvent.
Nous allons donc fusionner ces deux méthodes javascript dans une seule fonction.
Code javascript :
Exemple de code :
function supprimeEvent(objet, typeEvent, nomFunction, typePropagation){
  if (objet.addEventListener) {
    objet.removeEventListener(typeEvent, nomFunction, typePropagation);
  } else if (objet.attachEvent) {
    objet.detachEvent('on' + typeEvent, nomFunction);
  }
}

removeEventListener

Pour que l'action soit enlevée de l'événement, il faut que la valeur "typePropagation" soit la même.
Exemple de code :
objet.addEventListener('click', nomFunction, true);

objet.removeEventListener(''click'', nomFunction, false);
//La fonction nomFunction est toujours appelée
objet.removeEventListener(''click'', nomFunction, false);
//La fonction nomFunction n'est plus appelée

Cummule des actions

Plusieurs actions pour un même événement

Les méthodes javascript attachEvent et addEventListener permettent d'assigner plusieurs fonctions à un même événement.
Pour cet exemple nous utiliserons la fonction ajouteEvent (voir Fusion des deux méthodes).
Code html :
Exemple de code :
<div id="idevement">Mon événement javascript</div>

Code javascript :
Exemple de code :
function action(event){
  alert("action");
}
function action1(event){
  alert("action 1");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);
ajouteEvent(momoElement,"click",action1,false);

Exemple :
Mon événement javascript


Cela peut vous servir pour lancer plusieurs onload. Pour que les fonctions soient déclanchées dans l'ordre d'assignation à l'événement, vous devez mettre la propriété "typePropagation" à true.

La propagation est différente

Infos

Lorque vous utilisez l'assignation d'événement DOM 2, Internet Explorer l'événement se propage du bas vers le haut c'est à dire du fils vers le parent.
Netscape (Firefox/Mozilla) respect la propagation du DOM dans les deux sens. Si "typePropagation" est égale à truel'événement se propage du haut vers le bas c'est à dire du parent vers le fils. Si "typePropagation" est égale à false, l'événement se propage du bas vers le haut c'est à dire du fils vers le parent.
Exemple de code :
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
  if (objet.addEventListener) {
    objet.addEventListener(typeEvent, nomFunction, typePropagation);
  } else if (objet.attachEvent) {
  objet.attachEvent('on' + typeEvent, nomFunction);
  }
}
function action(event){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);
//IMG
//DIV

Exemple :
Mon événement javascript
Cliquez sur l'image.

L'objet javascript event

Définition

L'objet javascript event est utilisé de la même facon que dans le chapitre précèdant.
Je vous rappelle que pour Netscape (Mozilla,Firefox), l'objet event est passé en paramètre à la fonction qui gère l'événement; pour Internet Explorer c'est un objet global window.event.
L'objet javascript event regroupe un ensemble de propriétés relatives à l'événement javascript.

Pour plus d'information reportez vous au cours javascript :
"Assigner un événement".

Conclusion

Info

Il est à mon avis plus simple d'utiliser la méthode que nous avons vu dans le cours javascript : "Assigner un événement".