AddEventListener（）方法

例子

当点用户单击按钮时触发监视器事件：




document.getelementbyid（mybtn ）AddEventListener（单击。




addEventListener（）方法来添加一个事件处理到一个指定的元素。

事件处理由addEventListener添加（）方法不覆盖现有的事件处理。

可以向元素添加多个事件句柄。

可以将多个相同类型的事件句柄添加到同一个元素中，例如两个单击事件。

您可以向任何DOM对象添加事件侦听器，而不仅仅是HTML元素。

addEventListener（）方法可以更简单的控制事件（冒泡和捕获）。

当你使用addEventListener（）方法，Javaｓｃｒｉｐｔ是从HTML标签分离，这是更具可读性，也可以添加事件侦听器不控制HTML标签。

你可以使用removeEventListener（）移除事件侦听器方法。

语法




element.addeventlistener（事件、函数、useCapture）；




第一个参数是事件的类型（如点击或鼠标）。

第二个参数是事件触发后调用的函数。

第三个参数是一个布尔值，用于描述某个事件是否冒泡或捕获。这个参数是可选的。

注：不要使用前缀。例如，使用点击而不是用onclick。

向原始元素添加事件句柄

例子

当用户单击该元素时，Hello World！：




element.addeventlistener（单击




您可以使用函数名来引用外部函数：

例子

当用户单击该元素时，Hello World！：




element.addeventlistener（单击

函数myFunction（）{
警报（你好世界）！；
}






将多个事件句柄添加到同一个元素

addEventListener（）方法允许额外的事件被添加到相同的元素和不覆盖现有的事件：

例子




element.addeventlistener（单击
element.addeventlistener（单击




可以将不同类型的事件添加到同一个元素中：

例子




element.addeventlistener（鼠标悬停
element.addeventlistener（单击
element.addeventlistener（mouseout




向窗口对象添加事件句柄

addEventListener（）方法允许你添加事件侦听器的HTML DOM对象，HTML DOM对象如HTML元素，HTML文档、窗口或其他对象，如XMLHttpRequest对象的对象。

例子

当用户重置窗口时添加事件监视器：




Window.addEventListener（调整
document.getelementbyid（演示）.innerHTML =一些文本；
}）；




传递参数

当传递参数值时，带有参数的函数被调用为匿名函数。

例子




element.addeventlistener（单击




事件泡沫还是事件捕获

事件转移有两种方式：冒泡和捕获。

事件传递定义了触发的元素事件的顺序。如果将元素插入到元素中，用户单击元素，则首先触发哪个元素的单击事件

在气泡中，首先触发内部元素的事件，然后触发外部元素，即单击元素第一触发器的事件，然后触发单击事件。

在捕获过程中，首先触发外部元素事件，然后触发内部元素事件，即单击元素第一触发器的事件，然后触发元素的单击事件。

addEventListener（）方法可以指定设置传输类型useCapture参数：




AddEventListener（事件、函数、useCapture）；




默认值是false，即气泡传递，当值为true时，事件使用捕获通道。

例子

document.getelementbyid（mydiv ）AddEventListener（单击。

试试。

RemoveEventListener（）方法

removeEventListener（）方法中移除事件处理由addEventListener添加（）方法：

例子




element.removeeventlistener（MouseMove




浏览器支持

表中的数字表示支持该方法的第一个浏览器的版本号。



注：IE 8和更早版本的IE，Opera 7和更早的版本不支持addEventListener（）和removeEventListener（）方法。然而，这种类型的浏览器版本的detachevent（）方法可以用来删除事件处理：




element.attachevent（事件、功能）；
element.detachevent（事件、功能）；


例子

跨浏览器解决方案：




var x = document.getelementbyid（mybtn ）；
如果（x.addeventlistener）{ / /所有主流的浏览器，除了IE 8和更早的版本
X.addEventListener（单击
如果（x.attachevent）{} / / IE 8和更早的版本
x.attachevent（onclick