Explication détaillée de l'utilisation de addEventListener en JavaScript

addEventListener est utilisé pour enregistrer le programme de traitement d'événements , qui est attachEvent dans IE Pourquoi parlons-nous de addEventListener au lieu de attachEvent ? Premièrement, attachEvent est relativement simple et deuxièmement, addEventListener est le contenu standard du DOM. Aujourd'hui, je vais vous présenter une explication détaillée de l'utilisation de addEventListener en JavaScript !

(A noter que p doit être placé devant js)

Généralement, si vous liez le même événement à un objet DOM, seul le dernier prendra effet . Par exemple :

Le code est le suivant :

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;

Alors seule la méthode 3 prendra effet.
S'il s'agit de la série Mozilla, utilisez addEventListener pour implémenter plusieurs événements dans l'ordre, par exemple :

Le code est le suivant :

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);

L'ordre d'exécution est method1-> method2->method3

S'il s'agit d'une série ie, utilisez attachEvent pour implémenter plusieurs événements en séquence, par exemple :

Le code est le suivant :

var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);

L'ordre d'exécution est method3->method2->method1
=========================== ======== =====================
Dans Mozilla :
Comment utiliser addEventListener

target.addEventListener(type,listener,useCapture);

cible : Nœud de document, document, fenêtre ou XMLHttpRequest.
type : chaîne, nom de l'événement, à l'exclusion de "on", tel que "clic", "mouseover", "keydown", etc.
listener : implémente l'interface EventListener ou une fonction en JavaScript.
useCapture : s'il faut utiliser la capture, généralement faux. Par exemple :

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

Dans IE :

target.attachEvent(type, listener);

cible : nœud de document, document, fenêtre ou XMLHttpRequest.
type : chaîne, nom de l'événement, y compris "on", tel que "onclick", "onmouseover", "onkeydown", etc.
listener : implémente l'interface EventListener ou une fonction en JavaScript. Par exemple : document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
W3C et IE prennent tous deux en charge la suppression des événements spécifiés. Les formats des événements définis sont les suivants :

removeEventListener(event,function,capture/bubble);

Le format de Windows IE est le suivant :

detachEvent(event,function);

Évolution DOM2 :

addEventListener(event,function,capture/bubble);

window.attachEvent(”submit”,myFunction());

if (typeof window.addEventListener != “undefined”) { 
window.addEventListener(”load”,rollover,false); 
} else { 
window.attachEvent(”onload”,rollover) 
}

removeEventListener(event,function,capture/bubble);

detachEvent(event,function);

javascript DOM对象学习之事件流addEventListener()使用教程

关于addEventListener问题

详解addEventListener的三个参数之useCapture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!