事件——事件流、事件处理程序

Chengtszkong
120 阅读2分钟

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻（用户或浏览器执行了某种动作）。可以使用仅在事件发生时执行的监听器（也叫处理程序）来订阅事件。这个模型叫 “观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义） 的分离。

事件流

事件流描述的是从页面中接收事件的顺序。IE 的事件流是事件冒泡流，Netscape Communicator 的事件流是事件捕获流。

事件冒泡

事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

<body>
    <div></div>
</body>

如果点击了 <div> 元素，那么 click 事件传播顺序是： div > body > html > document

事件捕获

事件捕获（event capturing），即事件是由不太具体的节点更早接收到，最具体的节点最后才接收到。

以事件冒泡的例子，click 事件触发顺序是：document > html > body > div

DOM 事件流

“DOM2级事件” 的事件流包含：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段。

事件处理程序

事件处理程序或事件侦听器是响应某个事件的函数。

HTML 事件处理程序
<input type="button" value="点我" onclick="console.log('已点击')" />
DOM0 级事件处理程序

每个元素都有自己的事件处理程序属性，如：

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    console.log("clicked");
};

DOM0 级指定的事件处理程序是元素的方法，这时候的事件处理程序实在元素的作用域运行的；即程序中的 this 引用当前元素。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    console.log(this.id);
};

删除 DOM0 级事件处理程序：

btn.onclick = null;
DOM2 级事件处理程序

DOM2 级事件定义了指定和删除事件处理程序的操作：addEventListener()、removeEventListener()；

参数说明：

  • 要处理的事件名；
  • 事件处理程序的函数；
  • 布尔值，true：表示在捕获阶段调用事件处理程序，false：表示在冒泡阶段调用事件处理程序；
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    console.log(this.id);
}, false)

移除事件：

btn.removeEventListener("click", function() { // 无效
    console.log(this.id);
}, false)

虽然第二个参数事件处理程序的函数看似相同，但是二者完全不同的函数。

// 有效
var handler = function () {
    console.log(this.id);
};

btn.addEventListener("click", handler, false);

btn.removeEventListener("click", handler, false);
avatar
文章
阅读
粉丝