JavaScript——DOM事件流

今天星期几呢

已于 2022-11-26 11:56:46 修改

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html 开发语言

于 2022-11-25 11:50:10 首次发布

本文链接：https://blog.csdn.net/shhghvvh/article/details/128033973

版权

1.概述

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流中有三个阶段：捕获阶段，当前目标阶段，冒泡阶段

图解

2.DOM事件流中的三个阶段

1.JS代码中只能执行捕获或者冒泡其中的一个阶段。

2.onclick和 attachEvent （ie）只能得到冒泡阶段。

3. addEventListener(type,listener[，useCapture])第三个参数如果是 true，表示在事件捕

获阶段调用事件处理程序;如果是false (不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。

4．实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

2.1 捕获阶段

第三个参数如果是 true，表示在事件捕获阶段 document>html>body>father>son

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
        alert('son')
    },true);
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father')
    },true);
</script>
</body>

先后顺序弹出