DOM 事件

快樂小鬼吖
229 阅读5分钟

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件。

一、DOM监听事件

DOM 节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

该接口主要提供三个实例方法。

  • addEventListener()：绑定事件的监听函数
  • removeEventListener()：移除事件的监听函数
  • dispatchEvent()：触发事件

1. EventTarget.addEventListener()

EventTarget.addEventListener()用于在当前节点或对象上（即部署了 EventTarget 接口的对象），定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。

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

该方法接受三个参数。

  • type：事件名称，大小写敏感。
  • listener：监听函数。事件发生时，会调用该监听函数。
  • useCapture：布尔值，如果设为true，表示监听函数将在捕获阶段（capture）触发。该参数可选，默认值为false（监听函数只在冒泡阶段被触发）。

下面是一个例子：

function hello() {
  console.log('Hello world');
}

var button = document.getElementById('btn');
button.addEventListener('click', hello, false);

上面代码中，button节点的addEventListener()方法绑定click事件的监听函数hello()，该函数只在冒泡阶段触发。

addEventListener()方法可以为针对当前对象的同一个事件，添加多个不同的监听函数。这些函数按照添加顺序触发，即先添加先触发。如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener()方法手动去除）。

function hello() {
  console.log('Hello world');
}

document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);

执行上面代码，点击文档只会输出一行Hello world。

2.EventTarget.removeEventListener()

EventTarget.removeEventListener()方法用来移除addEventListener()方法添加的事件监听函数。该方法没有返回值。

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

removeEventListener()方法的参数，与addEventListener()方法完全一致。它的第一个参数“事件类型”，大小写敏感。

注意，removeEventListener()方法移除的监听函数，必须是addEventListener()方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。

div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);

上面代码中，removeEventListener()方法无效，因为监听函数不是同一个匿名函数。

element.addEventListener('mousedown', handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false);

上面代码中，removeEventListener()方法也是无效的，因为第三个参数不一样。

二、事件的传播

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

  • 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
  • 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
  • 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。 image.png

这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

<div>
  <p>点击</p>
</div>

上面代码中，<div>节点之中有一个<p>节点。

如果对这两个节点，都设置click事件的监听函数（每个节点的捕获阶段和冒泡阶段，各设置一个监听函数），共计设置四个监听函数。然后，对<p>点击，click事件会触发四次。

var phases = {
  1: '捕获阶段',
  2: '目标阶段',
  3: '冒泡阶段'
};

var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);

function callback(event) {
  var tag = event.currentTarget.tagName;
  var phase = phases[event.eventPhase];
  console.log("标签 '" + tag + "'. 事件阶段: '" + phase + "'");
}

// 点击以后的结果
// 标签 'DIV'. 事件阶段: '捕获阶段'
// 标签 'P'. 事件阶段: '目标阶段'
// 标签 'P'. 事件阶段: '目标阶段'
// 标签 'DIV'. 事件阶段: '冒泡阶段

上面代码表示，click事件被触发了四次：<div>节点的捕获阶段和冒泡阶段各1次，<p>节点的目标阶段触发了2次。

  1. 捕获阶段：事件从<div>向<p>传播时，触发<div>的click事件；
  2. 目标阶段：事件从<div>到达<p>时，触发<p>的click事件；
  3. 冒泡阶段：事件从<p>传回<div>时，再次触发<div>的click事件。

其中，<p>节点有两个监听函数（addEventListener方法第三个参数的不同，会导致绑定两个监听函数），因此它们都会因为click事件触发一次。所以，<p>会在target阶段有两次输出。

注意，浏览器总是假定click事件的目标节点，就是点击位置嵌套最深的那个节点（本例是<div>节点里面的<p>节点）。所以，<p>节点的捕获阶段和冒泡阶段，都会显示为target阶段。

事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。

三、事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

上面代码中，click事件的监听函数定义在<ul>节点，但是实际上，它处理的是子节点<li>的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个<li>节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。

总结一下事件代理的优点：

  • 省监听数（内存）
  • 可以监听动态元素
avatar
文章
阅读
粉丝