事件捕获和事件冒泡理解

之前总是单纯的记得事件冒泡和事件捕获相反,一个从下至上,另一个从上至下,但是却没有弄明白他们的执行顺序,导致昨晚笔试CVTE出了类似这么一道题不会做。

对于DOM和DOM2级事件这两个区别就不详细解释了,网上大把资料。

这里仅针对该题目进行事件捕获和事件冒泡顺序进行理解。

首先要明白DOM2级事件规定的事件流包含3个阶段,事件捕获阶段、处于目标阶段、事件冒泡阶段。

下面贴题目代码(仅核心部分)进行详细解释,首先

addEventListener方法有三个参数,分别是事件监听类型,事件执行函数和是否进行事件捕获,默认值为false,即不进行事件捕获(那自然就是事件冒泡了)。

问题来了,点击a1元素,控制台如何输出,我们来按照DOM2级事件规定的事件流进行分析一下即可得出答案

<body><div id="dog">      dog

      <div id="a1">        a1

      </div></div><script>      window.onload =function() {

        let dog = document.getElementById('dog')

        let a1 = document.getElementById('a1')

        a1.addEventListener('click', () => console.log('a1'), true)// a1新增一个事件捕获

        a1.addEventListener('click', () => console.log('a1 12'), false)// a1新增一个事件冒泡

        dog.addEventListener('click', () => console.log('dog12'), false)// dog新增一个事件冒泡

        dog.addEventListener('click', () => console.log('dog'), true)// dog新增一个事件捕获

      }

    </script></body>

这里贴一下流程图,大家肯定能理解了

没错,最后控制台输出如下

先执行捕获再执行冒泡

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 都说看一个人漂不漂亮,要看她的脸,而看一个人的脸,最重要的是看她的眼睛。一篇软文好看不好看,首先我们看的就是标题,...
    荻花令阅读 5,708评论 0 0
  • 乌鲁木齐还真是很男人,昨天刚刚抱怨大雪晚来,结果到夜晚,到今天,飞雪漫天。 这样的天气,不出来喝酒,简直就不是男人...
    赵可爸爸阅读 3,339评论 3 16
  • 萧萧梧叶送寒声, 江上秋风动客情。
    喜亭_bf8f阅读 3,621评论 11 18
  • 【缘起】 填空题第5小题,参考答案是99,99。 学校阅卷时认为错了,把它改成了100,98。 元芳你怎么看? ...
    红小杨阅读 4,886评论 0 1
  • 我的心没有形状 我总跟随它去游荡 当下万分渴望 明日又极度不想 我的心不该没有形状 我想跟随它去游荡 它不能像天上...
    喜提笑脸一张阅读 1,592评论 1 0