Tutorial zur Verwendung des JavaScript-DOM-Objektlern-Ereignisstroms addEventListener()

addEventListener wird verwendet, um das Ereignisverarbeitungsprogramm zu registrieren, das im IE „attachEvent“ ist. Warum sprechen wir über „addEventListener“ anstelle von „attachEvent“? Erstens ist attachmentEvent relativ einfach und zweitens ist addEventListener der Standardinhalt in DOM.

Lernen Sie die Videokurse auf unserer chinesischen PHP-Website: Dugu Jiujian (3)_JavaScript-Video-Tutorial

Einführung

addEventListener registriert einen Ereignishandler für den Dokumentknoten, das Dokument, das Fenster oder XMLHttpRequest. In der Vergangenheit haben wir normalerweise c255959dd1ff6b86e62b56725b900489 元素插入到 dc6dce4a544fdca2df29d5ac0ea9906b 元素中，用户点击 e388a4556c0f65e1904146cc1a846bee 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： e388a4556c0f65e1904146cc1a846bee 元素的点击事件先触发，然后会触发 dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件先触发 ，然后再触发 e388a4556c0f65e1904146cc1a846bee 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如： 

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

那么将只有method3生效。 
如果是Mozilla系列，用addEventListener可以让多个事件按顺序都实现，比如： 

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);

执行顺序为method1->method2->method3 
如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如： 

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

执行顺序为method3->method2->method1 

相关内容推荐：

1. Javascript 的addEventListener()及attachEvent()区别分析

2. 解析js中addEventListener()与removeEventListener()