DOM 事件流

最新推荐文章于 2023-05-12 21:28:28 发布

漂亮小咪

最新推荐文章于 2023-05-12 21:28:28 发布

阅读量74

点赞数 1

文章标签： css3 css html javascript html5

本文链接：https://blog.csdn.net/su_yun/article/details/121242145

版权

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？

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

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

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

事件冒泡：IE最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受的过程。

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。江湖
最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

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

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

例如：

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

注意：

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

2.onclick和attachEvent只能得到冒泡阶段

3.addEventListener（type，listener[userCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序

4.在时间开发中我们很少使用事件捕获，我们更关注事件冒泡。

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

代码演示：


<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>


<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
</body>

<script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
         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>

<script> 
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

漂亮小咪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。..
复制链接

扫一扫