JavaScript中的事件处理机制

事件是程序各部分之间的一种通信方式，也是异步编程的一种实现形式。本文将详细介绍EventTarget接口及其相关方法，以及如何使用监听函数处理事件。

1. EventTarget接口

EventTarget接口用于接收和触发事件。所有的DOM节点对象都实现了这个接口。该接口提供了三个实例方法：

• addEventListener: 绑定事件监听器
• removeEventListener: 移除事件监听器
• dispatchEvent: 触发事件

1.1 EventTarget.addEventListener()

EventTarget.addEventListener() 方法用于为节点或对象绑定一个事件监听器。一个对象或节点可以绑定多个监听器，但如果每个监听器的监听函数相同，则只会执行一次，其他相同的函数会被自动移除。

该方法接受三个参数：

target.addEventListener(type, listener[, options]);

• type: 事件类型（如：click, focus），区分大小写。
• listener: 监听函数（函数名）。当事件发生时，会调用此函数。
• options: 可选参数，可以是布尔值或一个包含以下属性的对象：

• capture: 布尔值，表示该事件是否在捕获阶段触发监听函数。默认值为 false（仅在冒泡阶段触发）。
• once: 布尔值，表示监听函数只触发一次，然后自动移除。
• passive: 布尔值，表示监听函数不会调用事件的 preventDefault 方法。如果监听函数调用了，浏览器会忽略该请求，并在控制台输出警告。

示例 1：

const oDiv = document.querySelector('.div1');
function eventFun() {
  console.log('事件监听器已触发');
}
oDiv.addEventListener('click', eventFun, false);

示例 2：

oDiv.addEventListener('click', {
  handleEvent: function() {
    console.log('handleEvent 方法已调用');
  }
});

1.2 EventTarget.removeEventListener()

EventTarget.removeEventListener() 方法用于移除通过 addEventListener 添加的事件监听器。该方法没有返回值，用法与 addEventListener 完全相同。

1.3 EventTarget.dispatchEvent()

EventTarget.dispatchEvent() 方法在当前节点上触发指定事件，从而调用相应的监听函数。该方法返回一个布尔值，如果任何一个监听函数调用了 Event.preventDefault()，则返回 false，否则返回 true。

示例 3：

oDiv.addEventListener('click', eventFun, false);
const event = new Event('click');
oDiv.dispatchEvent(event); // 自动触发 click 事件

2. 监听函数

浏览器的事件模型通过监听函数来响应事件。当浏览器检测到某个事件时，会调用相应的监听函数。Javascript 中有三种方法可以为事件绑定监听函数：

2.1 HTML 的 on- 属性

// 这样绑定的是函数名 + ()，当事件发生时会立即执行函数

2.2 元素节点的事件属性

div.Onclick= function() {
  console.log('节点事件已触发');
};

2.3 EventTarget.addEventListener()

使用方法同上一小节。

2.4 总结

第一种方法违反了HTML与Javascript代码分离的原则，不利于代码维护，不推荐使用。
第二种方法，同一个事件只能定义一个监听函数。如果多次定义，后面的会覆盖前面的。不推荐使用。
第三种方法是推荐且官方指定的监听函数方法，原因如下：

• 同一个事件可以添加多个监听函数。
• 可以指定在哪个阶段触发监听函数。
• 除了DOM节点，其他对象（如：window, XMLHttpRequest 等）也实现了这个接口，它是整个Javascript中统一的监听函数接口。