addEventListener的第三个参数

若是要把HTML元素的事件与某个函数绑定起来，能够有下面三种方法，以最多见的“点击”事件为例。

方法一：

直接在对应的HTML元素标签上绑定函数

<button id='submit' onclick='onClickFn()'>Click Me!</button>

方法二：

在JavaScript代码里面指定元素的“onclick”方法

var btn = document.getElementById('submit');

btn.onclick = onClickFn;

方法三：

使用事件监听绑定方法

var btn = document.getElementById('submit');

btn.addEventListener('click', onClickFn, false);

三种方法均可以在button被点击的时候调用onClickFn函数，可是有所区别。

第一种方法不推荐，由于违反了HTML与JavaScript分离的准则；

第二种方法只能给一个事件绑定一个响应函数，重复绑定会覆盖以前的绑定；

第三种方法比较推荐，能够绑定多个不一样的函数。

不过退步推荐不是重点，重点是第三种方法中的第三个参数为什么是“false”？

当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，能够想象一下，button其实是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。因此，在你的鼠标点下去的时候，最早得到这个点击的是最外面的window，而后通过一系列传递才会传到最后的目标button，当传到button的时候，这个事件又会像水底的泡泡同样慢慢往外层穿出，直到window结束。

综上，一个事件的传递过程包含三个阶段，分别称为：

捕获阶段，目标阶段，冒泡阶段

目标指的就是包裹得最深的那个元素。

假设HTML有以下元素：

<div id='d'>
    <p id='p'>
        <span id='s'>Click Me!</span>
    </p>
</div>

JavaScript代码以下：

var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s');

function onClickFn (event) {
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName, phase);
}

div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);

此时，点击“Click Me!”，便可在控制台看到以下结果：

P 3
DIV 3

其中“3”和“冒泡阶段”对应。

能够看出，p和div都是在冒泡阶段相应了事件，因为冒泡的特性，裹在里层的p率先作出响应。

若是把上面代码里面中addEventListener的第三个参数设置为true，那么运行的结果以下：

DIV 1
P 1

由此，addEventListener的第三个参数设置为true和false的区别已经很是清晰了：

true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；

false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应时间。

至此，你可能会有疑问，还有一个“目标阶段”呢？

您不妨给span元素绑定事件，本身测试一下。

在冒泡阶段，若是不但愿事件继续往上传播，例如，冒泡的p的时候就中止传播，那么，能够在p的事件回调函数里面这么写：

function onClickFn (event) {
    // code here
    event.stopPropagation();
}

这样，冒泡到p的时候，就不会再向上传播了，即，div不会收到冒泡上来的click事件。

若是还想把其它与p绑定的响应函数的事件也“屏蔽”掉，须要把stopPropagation换为stopImmediatePropagation。

【END】