理解事件捕获和事件冒泡

朴灿烈づ我的快乐病毒、 2022-07-25 18:57 264阅读 0赞

参考资料[浅谈事件冒泡与事件捕获][Link 1]  
一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章，但是当时只是看过了就是看过了，没有自己实际的实践，并没有什么自己的理解在里面，属于转眼就忘的那种状态，这段时间由于参加百度的[ife][]前端培训，做到js方面的任务时，决定仔细的学习一下时间捕获和事件冒泡，所以就有了今天这篇文章。  
**ps**：其实前两天就想写了，但无奈图书馆的网一直连不上，只好推到今天，正好复习一下。

事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。  
好了，对于事件捕获和事件冒泡有了一个概念上的理解，那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码

<!DOCTYPE html>
    <html>
    <head>
        <title>event</title>
    </head>
    <body>
        <div id="obj1">
            welcome
            <h5 id="obj2">hello</h5>
            <h5 id="obj3">world</h5>
        </div>
        <script type="text/javascript"> var obj1=document.getElementById('obj1'); var obj2=document.getElementById('obj2'); obj1.addEventListener('click',function(){ alert('hello'); },false); obj2.addEventListener('click',function(){ alert('world'); }) </script>
    </body>
    </html>

如上所示，这是一个十分简单地文档结构：`document > html > body > div > h5`  
并且分别在`obj1`,`obj2`上绑定了一个点击事件，由于`addEventListener`的第三个参数为`false`,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现

1.  点击文字welcome时，弹出hello。  
    此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome 属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，`body`，没有绑定点击事件，再到`html`,`document`,都没再有绑定的点击事件，好，整个冒泡过程结束。
2.  点击文字hello时，先弹出world，再弹出hello。  
    具体冒泡的过程如下图所示

![冒泡过程][20160403170259826]  
3. 点击world时，弹出hello。  
具体冒泡过程和第二种情况类似，如下图  
![这里写图片描述][20160403170644890]

理解了以上的内容，我们可以接着来讨论**事件代理机制**。  
比如上面的代码，我们想要在点击每个h5标签时，弹出对应的`innerHTML` 。常规做法是遍历每个h5,然后在每个h5上绑定一个点击事件，这种做法在h5较少的时候可以使用，但如果有一万个h5，那就会导致性能降低。这时就需要事件代理出场了。  
先贴代码

obj1.addEventListener('click',function(e){ 
                var e=e||window.event;
                if(e.target.nodeName.toLowerCase()=='h5'){
                    alert(e.target.innerHTML);
                }
    
            },false);

由于事件冒泡机制，点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件，再利用target找到事件实际发生的元素，就可以达到预期的效果。

[Link 1]: https://segmentfault.com/a/1190000000749838
[ife]: http://ife.baidu.com/
[20160403170259826]: /images/20220724/a93e156ac03f4166b3ca1d93f42e8d57.png
[20160403170644890]: /images/20220724/e4eaef0367324b97b9fc72a30b3e1fcf.png