Cours Javascript->Assigner un événement DOM 2
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)
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 :
Code javascript :
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.addEventListener("click", action, false);
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 :
Code javascript :
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.attachEvent("onclick", action);
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 :
Code javascript :
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 :
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 :
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 :
if (objet.addEventListener) {
objet.removeEventListener(typeEvent, nomFunction, typePropagation);
} else if (objet.attachEvent) {
objet.detachEvent('on' + typeEvent, nomFunction);
}
}
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.
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
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 :
Code javascript :
alert("action");
}
function action1(event){
alert("action 1");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);
ajouteEvent(momoElement,"click",action1,false);
Exemple :
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.
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.
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 :
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".
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".
