JavaScript addEventListener()事件监听方法

addeventlistener()方法将事件处理程序附加到指定的元素。

addeventlistener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。

您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。

您可以将事件侦听器添加到任何dom对象，而不仅仅是html元素。即window对象。

addeventlistener()方法可以更容易地控制事件对冒泡的反应。

使用addeventlistener()方法时，javascript与html标记分离，以提高可读性，

并允许您添加事件侦听器，即使您不控制html标记也是如此。

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

语法：element.addeventlistener(event, function, usecapture);

• 第一个参数是事件的类型（如“ click”或“ mousedown”）。
• 第二个参数是我们想要在事件发生时调用的函数。
• 第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。

document.getelementbyid("mybtn").addeventlistener("click", displaydate);

向元素添加事件处理程序

当用户点击某个元素时提醒“hello world！” ：

element.addeventlistener("click", function(){ alert("hello world!"); });

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

element.addeventlistener("click", myfunction);
function myfunction() {
  alert ("hello world!");
}

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

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

element.addeventlistener("click", myfunction);
element.addeventlistener("click", mysecondfunction);

element.addeventlistener("mouseover", myfunction);
element.addeventlistener("mouseout", mythirdfunction);

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

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

如xmlhttprequest对象。

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

window.addeventlistener("resize", function(){
  document.getelementbyid("demo").innerhtml = sometext;
});

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

element.addeventlistener("click", function(){ myfunction(p1, p2); });

事件冒泡或事件捕获？

html dom中有两种事件传播方式，即冒泡和捕获。

事件传播是一种在事件发生时定义元素顺序的方法。

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

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

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

使用addeventlistener()方法，您可以使用“usecapture”参数指定传播类型：

默认值为false，将使用冒泡传播，当值设置为true时，事件使用捕获传播。

document.getelementbyid("myp").addeventlistener("click", myfunction, true);
document.getelementbyid("mydiv").addeventlistener("click", myfunction, true);

removeeventlistener()方法

element.removeeventlistener("mousemove", myfunction);

注：该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);
}

html dom事件对象参考