DOM事件流

小犬牙吃糖果

于 2022-11-23 22:33:10 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/LUXCC6/article/details/128009168

本文详细介绍了DOM事件流的概念，包括事件的捕获阶段和冒泡阶段。通过实例展示了如何在HTML元素上注册事件监听器，并分别在捕获和冒泡阶段触发事件。内容涵盖了事件从document传播到具体元素的过程，帮助理解事件处理的顺序和机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

DOM事件流会经历3个阶段：

1.捕获阶段

2.当前目标

3.冒泡阶段

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

事件冒泡

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(event) {
           
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕获

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
		// 给son注册单击事件，第3个参数为true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
		// 给father注册单击事件，第3个参数为true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
		// 给document注册单击事件，第3个参数为true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>