js响应事件的阶段，捕获阶段，冒泡阶段

喜欢ヅ旅行 2022-07-24 09:16 213阅读 0赞

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

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

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

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

实例：

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

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 phase为3说明事件在冒泡阶段响应的。数字对应三个阶段3：冒泡阶段，2：目标阶段，1：捕获阶段 将参数改为true将看到： DIV 1
    P 1说明事件在捕获阶段响应的。
    
     由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了： true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件； false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件。
    
    原文链接：http://my.oschina.net/u/1454562/blog/205010