【JavaScript 】- addEventListener()事件监听

addEventListener() 方法用于向指定元素添加事件句柄(id)。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法：element.addEventListener(event, function, useCapture)

1.参数：

*event*            //必须。字符串，指定事件名。
`注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。`

*function*        //必须。指定要事件触发时执行的函数。
    当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

*useCapture*    //可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行        捕获从外到内
false -- 默认。事件句柄在冒泡阶段执行    冒泡从内到外

2.向元素添加事件处理程序

2.1.向元素添加事件处理程序

element.addEventListener("click", function(){ alert("Hello World!"); });

2.2.您还可以在外部定义函数，然后把函数名当参数传：

element.addEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

3.将许多事件处理程序添加到同一元素

addEventListener(event, function, useCapture)方法允许您向同一元素添加许多事件，而不会覆盖现有事件

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
 
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);

4.将事件处理程序添加到window对象

addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器，例如HTML元素，HTML文档，window对象或支持事件的其他对象，如xmlHttpRequest对象。

4.1.添加在用户调整窗口大小时触发的事件侦听器：

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

4.2.传递参数值时，使用“匿名函数”，使用以下参数调用指定的函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

5.事件冒泡或事件捕获？

HTML DOM中有两种事件传播方式，即冒泡和捕获。事件传播是一种在事件发生时定义元素顺序的方法。

如果<div>元素中有<p>元素，并且用户单击<p>元素，应该首先处理哪个元素的“click”事件？

5.1.冒泡

在冒泡中，首先处理内部然后处理外部：首先处理<p>元素的click事件，然后处理<div>元素的click事件。

5.2.捕获

在捕获最外层元素时，首先处理外部然后处理内部：首先处理<div>元素的click事件，然后处理<p>元素的click事件。

5.3.使用addEventListener(event, function, useCapture)方法，您可以使用“useCapture”参数指定传播类型

5.3.1.默认值为false，将使用冒泡传播

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

// 同

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

5.3.2.可以设置true，使用捕获传播

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

6.removeEventListener(event, function, useCapture)事件

可以使用removeEventListener()方法轻松删除事件侦听器。

element.removeEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

7.addEventListener()和removeEventListener()兼容性问题

addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。但是，对于这些特定的浏览器版本，您可以使用attachEvent()方法将事件处理程序附加到元素，以及detachEvent()删除它的方法，解决方案

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 对于所有主流浏览器，IE 8及更早版本除外
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {   // 适用于IE 8及更早版本
  x.attachEvent("onclick", myFunction);
}