理解事件捕获和事件冒泡

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

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


<html>
<head>
    <title>eventtitle>
head>
<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">helloh5>
        <h5 id="obj3">worldh5>
    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。
    具体冒泡的过程如下图所示

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

理解了以上的内容,我们可以接着来讨论事件代理机制
比如上面的代码,我们想要在点击每个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找到事件实际发生的元素,就可以达到预期的效果。

你可能感兴趣的:(JavaScript)