JS day38 DOM事件流

最新推荐文章于 2022-03-01 15:47:32 发布

肝JOJO

最新推荐文章于 2022-03-01 15:47:32 发布

阅读量120

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102266089

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一.概念

1.事件流描述的是从页面中接收事件的顺序
2.事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
在这里插入图片描述

二.DOM事件流分为3阶段

1.捕获阶段
2.当前目标阶段
3.冒泡阶段
注:
*事件冒泡:
IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层的过程
*事件捕获:
网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收过程

三.DOM事件流代码验证

1.JS代码中只能执行捕获或者冒泡其中一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.addEventListener(type,listener[,useCapture])
①第三个参数如果是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);  //捕获阶段 document ->html ->body ->father ->son
        var father=document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father');
        },true); //由捕获阶段可知,当father也注册绑定事件时,点击son,先弹出father
    </script>
    
</body>

②如果是false(默认不写),则在事件冒泡阶段调用事件处理程序; son ->father ->body ->html ->document
代码示例:

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son=document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('son');
        });  //冒泡阶段 son ->father ->body ->html ->document
        var father=document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father');
        }); //由冒泡阶段可知,点击son,之后弹出father,
    </script>
</body>