addEventListener的第三个参数的作用

从头说起

如果需要给html中的某个dom绑定事件，有三种常用方法：

1.直接写在dom的事件钩子上

<span id="target" onClick="handleClick()">Click me</span>

这种方法破坏了dom和js分离的规则，所以不太被推荐，如果面试官让你做题，尽量别这么写，他们会单纯地以为你很low

2.通过js代码注册事件

var target = document.getElementById('target');
target.onclick = function() {
  // do something...
}

这种方式会比第一种方式更有“仪式感”，但是缺点也显而易见，只能绑定一次事件，下次绑定会清空上次绑定的事件

3.通过addEventListener来注册事件

var target = document.getElementById('target');
target.addEventListener('click', function() {
  // do something...
}, false);    // 如果不加第三个参数，默认是false

这种方式最为灵活，也是被普遍建议采用的事件绑定方式，那么问题来了，这第三个参数是用来干嘛的？

由于浏览器有事件冒泡的机制存在，当你点击一个dom，点击事件会沿着dom树结构像上或者下进行传播，如果你不想被其他相关节点相应到此次点击事件，那么就需要传说中的“阻止事件冒泡”了

假设div、p、span元素都有click事件的响应逻辑，

• 当第三个参数为false时（不传参数时，默认也是这种冒泡方式），点击<span />后，接下来<p />会响应此次事件，然后是<div />，既事件从上往下冒泡，如下图

propagation-false.png

---

当第三个参数为true时，点击<span />后，首先响应事件的是最底层的<div />，随后是<p />，最后才是你点击的<span />，如下图

propagation-true.png
__

其他小贴士

• 如何分辨事件是由冒泡产生的还是操作产生的？
  在事件处理函数中，可以通过

function handleClick (evt) {
  if (evt.phase === 1) {
    // 第三个参数为true时所导致的冒泡
  } else if (evt.phase === 3) {
    // 第三个参数为false时所导致的冒泡
  } else if (evt.phase === 2) {
    // 发生在当前dom的事件
  }
}

• 如何阻止事件冒泡？
  在事件处理函数中，可以通过

function handleClick(evt) {
  evt.stopPropagation();
  // 或者
  evt.stopImmediatePropagation();
}

上面的阻止冒泡不会阻止本dom本事件的其他事件处理函数的执行；
下面的阻止冒泡会导致后续绑定在该dom的其他事件处理函数不再执行；