本文参考《JS高级程序设计(第3版)》
事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。可以用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。
DOM 事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
复制代码
在上述代码中,单击<div>
元素会按顺序触发事件:
- 捕获阶段:1.
Document
2.Element html
3.Element body
- 处于目标阶段:4.
Element div
(事件在此发生) - 冒泡阶段: 5.
Element body
6.Element html
7.Document
(事件传播回文档)
事件处理程序
响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,所以clic
k事件的事件处理程序就是onclick
。
DOM2 级事件处理程序
“DOM2 级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()
和removeEventListener()
所有DOM节点都包含这两个方法,都接受三个参数:
- 要处理的事件名
- 作为事件处理程序的函数
- 一个布尔值:
true
表示在 捕获 阶段调用事件处理程序;false
表示在 冒泡 阶段调用事件处理程序
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以最大限度兼容各种浏览器。
addEventListener()
// 在按钮上为click事件添加事件处理程序:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert(this.id);
}, false);
复制代码
使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,按照添加的顺序触发。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert(this.id);
}, false);
btn.addEventListener("click", function() {
alert("Hello world!");
}, false);
/* 输出:
myBtn
Hello world!
*/
复制代码
removeEventListener()
通过addEventListener()
添加的事件处理程序只能通过removeEventListener()
移除。
需要注意的是添加的匿名函数无法移除,要重写。因为移除方法中的参数 匿名function()和添加方法中的是一个完全不同的函数。
btn.addEventListener("click", function() {
alert("Hello world!");
}, false);
// 移除不起作用
btn.removeEventListener("click", function() {
alert("Hello world!");
}, false);
复制代码
重写如下:
// 重写
var handler = function() {
alert("Hello world!");
};
btn.addEventListener("click", handler, false);
// 起作用
btn.removeEventListener("click", handler, false);
复制代码