hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

详解DOM事宜流的三个阶段_WEB前端开发

2019-12-01后端开发ki4网34°c
A+ A-
事宜发作时会在元素节点之间根据特定的递次流传,这个流传历程即DOM事宜流

DOM事宜流分为三个阶段,分别为:

捕捉阶段事宜从Document节点自上而下向目的节点流传的阶段;

目的阶段真正的目的节点正在处置惩罚事宜的阶段;

冒泡阶段事宜从目的节点自上而下向Document节点流传的阶段。

捕捉阶段:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>

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

</html>

控制台输出效果为:

能够看出捕捉阶段 事宜是从Document节点自上而下向目的节点流传的。

冒泡阶段:

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            console.log('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            console.log('father');
        }, false);
        document.addEventListener('click', function() {
            console.log('document');
        })
    </script>

控制台输出效果为:

能够看出冒泡阶段 事宜是从目的节点自上而下向Document节点流传的。

注重:

1、JS代码只能实行捕捉或许冒泡个中一个阶段(要么是捕捉要么是冒泡)

2、onclick和attachEvent(ie)只能获得冒泡阶段

3、addEventListener(type, listener[, useCapture]) 第三个参数如果是true,示意在事宜捕捉阶段挪用事宜处置惩罚顺序;如果是false(不写默许是false),示意在事宜冒泡阶段挪用事宜处置惩罚顺序

4、现实开发中,我们很少运用事宜捕捉,我们更关注事宜冒泡

5、有些事宜是没有冒泡的,比方onblur、onfocus、onmouseenter、onmouseleave

6、事宜的冒泡有时会带来贫苦,不过是能够被阻挠的,要领是:stopPropagation()

stopPropagation() 要领:停止事宜在流传历程的捕捉、目的处置惩罚或冒泡阶段进一步流传。挪用该要领后,该节点上处置惩罚该事宜的处置惩罚顺序将被挪用,事宜不再被分派到其他节点。

本文来自 js教程 栏目,迎接进修!

以上就是详解DOM事宜流的三个阶段的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
详解DOM事宜流的三个阶段_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>