0
点赞
收藏
分享

微信扫一扫

JS DOM事件流

墨香子儿 2022-04-18 阅读 121
javascript

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

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

什么是DOM事件流

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

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

DOM 事件流分为3个阶段:

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

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

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

当时的2大浏览器霸主谁也不服谁!
IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。
Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。

最终,w3c 采用折中的方式,制定了统一的标准 —--— 先捕获再冒泡。
现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。

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

注意:

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

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

3. addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕 获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理 程序。

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

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

猜一下运行结果

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
        //document -> html -> body -> father -> son
        //冒泡阶段 如果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>

运行结果是 son > father > document  (均处于冒泡阶段)

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
        //document -> html -> body -> father -> son
        //冒泡阶段 如果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');
        }, true);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

运行结果是 father >  son > document   (father处于捕获阶段)

举报

相关推荐

0 条评论