DOM事件流与事件委托

事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

事件冒泡

IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。

<div id="first">
  <div id="second">
    <div id="third"></div>
  </div>
</div>

#first {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: red;
  border: 1px solid #ccc;
}
#second {
  width: 150px;
  height: 150px;
  margin: 24px auto;
  background: yellow;
  border: 1px solid #ccc;
}
#third {
  width: 100px;
  height: 100px;
  margin: 24px auto;
  background: blue;
  border: 1px solid #ccc;
}

addEventListener第三个参数是false那么则处于冒泡阶段，不写则默认为false。

first.addEventListener('click', function () {
  console.log('红色');
});
second.addEventListener('click', function () {
  console.log('黄色');
});
third.addEventListener('click', function () {
  console.log('蓝色');
});

事件捕获

网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

first.addEventListener('click', function () {
  console.log('红色');
},true);
second.addEventListener('click', function () {
  console.log('黄色');
},true);
third.addEventListener('click', function () {
  console.log('蓝色');
},true);

addEventListener第三个参数是true那么则处于捕获阶段。

事件在不同阶段执行

first.addEventListener('click', function () {
  console.log('红色');
});
second.addEventListener('click', function () {
  console.log('黄色');
},true);
third.addEventListener('click', function () {
  console.log('蓝色');
});

JavaScript代码中只能执行捕获或者冒泡其中的一个阶段，我们可以这么来理解：

• 此处单击蓝色框后，事件捕获阶段
  从外向内捕获，到红色时，红色有事件，需在冒泡阶段执行，但此时是捕获阶段，先不执行，接下来是黄色，黄色在捕获阶段执行，所以先执行。
• 到达当前目标阶段
  执行目标对象的事件函数，控制台输出蓝色。
• 到达冒泡阶段
  由目标向外冒泡，到黄色时，捕获阶段已经执行，最后到达红色，红色在冒泡阶段执行，控制台输出红色。

实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
其中onclick和attachEvent只能得到冒泡阶段。
还有些事件是没有冒泡的，比如onblur、 onfocus、onmouseenter、onmouseleave。

事件委托

假如，当我们需要给ul中的多个li添加点击事件时，通常会为每个li标签加上点击事件，此时看起来每个li的点击事件触发时调用的都是一个函数，但其实不是这样，每个li绑定的都是一个全新的函数，只不过样子一模一样，这里我们可以判断一下：

let liList = document.querySelectorAll('li')
for (let i = 0; i < liList.length; i++) {
  liList[i].onclick = function () {
    console.log(this.innerHTML)
  }
}
console.log(liList[0].onclick == liList[1].onclick); //false

至此，我们可以得到结论，有多少个li，那么就会有多少个函数被创建在内存中占据空间，这样对内存的开销是巨大的。

前面我们介绍到了事件冒泡的原理，那么我们就可以通过这种机制把事件加在父元素的身上，也就是ul标签，这样ul里面的li做点击事件时，都会冒泡到ul上，所以都会触发，这就是事件委托，委托它们的父级代为执行事件。

Event对象

• 官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
• 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数)。

event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但不是真正操作dom。

IE678兼容性解决：e=e||window.event。
下面我们可以这样改写：

let ul = document.querySelector('ul')
ul.onclick = function (e) {
  e = e || window.event
  console.log(e.target.innerHTML)
}

这样如果li数量较多，就可以大大减少dom操作，优化的性能可想而知。