事件冒泡;事件捕获; 触发顺序，先捕获，后冒泡;取消冒泡（封装取消冒泡的函数）；事件对象

最新推荐文章于 2022-05-03 23:32:45 发布
最新推荐文章于 2022-05-03 23:32:45 发布
阅读量246 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/102055849
版权

事件冒泡：

        结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，

        即同一事件，自子元素冒泡向父元素。（自底向上）

<!DOCTYPE html>
<html lang="en">

<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>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        strong {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div>
        <span>
            <strong></strong>
        </span>
    </div>
</body>
<script>
    /*
      事件冒泡：
        结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，
        即同一事件，自子元素冒泡向父元素。（自底向上）
    */
    const div = document.getElementsByTagName('div')[0];
    const span = document.getElementsByTagName('span')[0];
    const strong = document.getElementsByTagName('strong')[0];
    div.addEventListener('click', () => {
        console.log('你触发到div标签了')
    }, false)
    span.addEventListener('click', () => {
        console.log('你触发到span标签了')
    }, false)
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了')
    }, false)
</script>

</html>

 事件捕获：

       结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，

       即同一事件，自父元素捕获子元素。（自顶向下）

       IE没有捕获事件。

<!DOCTYPE html>
<html lang="en">

<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>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        strong {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div>
        <span>
            <strong></strong>
        </span>
    </div>
</body>
<script>
    /*
     事件捕获：
       结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，
       即同一事件，自父元素捕获子元素。（自顶向下）
       IE没有捕获事件。
   */
    const div = document.getElementsByTagName('div')[0];
    const span = document.getElementsByTagName('span')[0];
    const strong = document.getElementsByTagName('strong')[0];
    div.addEventListener('click', () => {
        console.log('你触发到div标签了')
    }, true)
    span.addEventListener('click', () => {
        console.log('你触发到span标签了')
    }, true)
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了')
    }, true)



</script>

</html>

触发顺序，先捕获，后冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        strong {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
        <span>
            <strong></strong>
        </span>
</div>
</body>
<script>
    /*
    触发顺序，先捕获，后冒泡
     */
    const div = document.getElementsByTagName('div')[0];
    const span = document.getElementsByTagName('span')[0];
    const strong = document.getElementsByTagName('strong')[0];

    div.addEventListener('click', () => {
        console.log('你触发到div标签了——捕获')
    }, true);
    span.addEventListener('click', () => {
        console.log('你触发到span标签了——捕获')
    }, true);
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了——捕获')
    }, true);

    div.addEventListener('click', () => {
        console.log('你触发到div标签了——冒泡')
    }, false);
    span.addEventListener('click', () => {
        console.log('你触发到span标签了——冒泡')
    }, false);
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了——冒泡')
    }, false);


</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        strong {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
        <span>
            <strong></strong>
        </span>
</div>
</body>
<script>
    /*
    触发顺序，先捕获，后冒泡
     */
    const div = document.getElementsByTagName('div')[0];
    const span = document.getElementsByTagName('span')[0];
    const strong = document.getElementsByTagName('strong')[0];

    div.addEventListener('click', () => {
        console.log('你触发到div标签了——冒泡')
    }, false);
    span.addEventListener('click', () => {
        console.log('你触发到span标签了——冒泡')
    }, false);
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了——冒泡')
    }, false);

    div.addEventListener('click', () => {
        console.log('你触发到div标签了——捕获')
    }, true);
    span.addEventListener('click', () => {
        console.log('你触发到span标签了——捕获')
    }, true);
    strong.addEventListener('click', () => {
        console.log('你触发到strong标签了——捕获')
    }, true);

</script>
</html>

取消冒泡：
    W3C标准event.stopPropagation()；但不支持IE9以下版本。
    IE独有event.cancelBubble=true;但是谷歌浏览器现在也支持了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>
</body>
<script>
    /*
    取消冒泡：
        W3C标准event.stopPropagation()；但不支持IE9以下版本。
        IE独有event.cancelBubble=true;但是谷歌浏览器现在也支持了。
     */
    document.onclick = function () {
        alert("触发到文档里面的点击事件了")
    };
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function (e) {
        // e.stopPropagation();
        e.cancelBubble = true;
        this.style.backgroundColor = 'blue';
    };

    /*
    封装取消冒泡的函数stopBubble(event)
     */
    function stopBubble(event) {
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble = true
        }
    }
</script>
</html>

事件对象

event||window.event用于IE；
事件源对象：
    event.target 火狐只有这个
    event.srcElement IE只有这个
    这俩chrome都有
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
</body>
<script type="text/javascript">
    /*
    事件对象：
        event||window.event用于IE；
        事件源对象：
            event.target 火狐只有这个
            event.srcElement IE只有这个
            这俩chrome都有
     */
    var ul = document.getElementsByTagName('ul')[0];
    //事件源对象
    ul.onclick = function (event) {
        var event = event || window.event;
        var target = event.target || event.srcElement;
        console.log(target.innerText);
    }
</script>
</html>

 

&XYZ&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数
php_martin的博客
08-05 902
介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数
Js事件执行顺序，冒泡、捕获
前端小白的逆袭
11-03 3107
Js事件执行顺序，冒泡、捕获 先绑定先执行，先捕获后冒泡
一个DOM元素绑定多个事件时，先执行冒泡还是捕获
weixin_30702887的博客
09-18 157
绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。 一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。 首先来了解一下冒泡和捕获是怎么回事： 1.冒泡 冒泡是从下向上，D...
冒泡VS捕获 顺序
luqingxuan
03-21 180
  https://www.cnblogs.com/alvinwei1024/p/4739344.html   首先捕获从document -&gt; target 然后冒泡从target -&gt; document   同一个元素element上注册冒泡与捕获监听，谁先注册，谁先执行 ...
事件冒泡和事件捕获的顺序
roongyan92的博客
08-01 832
给同一个元素注册点击事件，测试事件冒泡和事件捕获的顺序，代码如下： <div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div> </div> <script> ...
兼容各大浏览器的JavaScript阻止事件冒泡代码
10-23
在这个示例中，点击`<p>`标签会先触发`clickP`函数，然后通过`stopEvent`函数阻止事件冒泡到`<div>`标签上的`clickDiv`函数。如果没有`stopEvent`函数阻止，点击`<p>`标签也会触发`clickDiv`函数，这在某些情况下并...
React中阻止事件冒泡的问题详析
10-17
事件处理包括事件的绑定、触发、捕获与冒泡等机制。React作为一个广泛使用的前端框架，对原生JavaScript事件处理进行了封装和优化，但在实际使用中仍需遵循一些规则和最佳实践。特别是在涉及到阻止事件冒泡（event ...
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
12-01
如果支持，那么就使用`addEventListener`添加事件处理函数，参数包括事件类型（如`'click'`）、处理函数以及是否使用捕获阶段（通常为`false`，表示使用冒泡阶段）。对于不支持`addEventListener`的浏览器（主要是IE...
详解用js代码触发dom事件的实现方案
10-15
当使用dispatchEvent方法触发的事件发生时，它会按照预期的事件捕获和冒泡顺序来执行，这样就可以模拟出真实的用户操作场景。 触发自定义事件之前，首先需要创建一个事件实例。根据不同的事件类型，有不同的接口来...
jquery 事件对象属性小结
10-29
事件对象通常在事件处理函数中作为参数存在，它包含了与特定事件相关的信息，如事件类型、事件触发者、鼠标坐标、键盘按键等。在不同浏览器中，这些事件对象的属性和行为可能存在差异，导致跨浏览器编程时存在兼容性...
事件冒泡和事件捕获的执行顺序
搬砖小鱼，请多指教呦
05-19 3607
之前看到过很多文章，文章都统一的说事件捕获执行在前，冒泡执行在后，实际上这是不严谨的，今天刚好有时间我们来捋一捋，直接举例子 <div id="div1"> 我是div1 <div id="div2">我是div2 <div id="div3"> 我是div3 <div id="div4">我是div4</div>
事件冒泡和捕获的执行顺序
weixin_43312083的博客
10-10 706
addEventListener() 方法 addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture)， 其中的event，必须。字符串，指定事件名。 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 function 必须。指定要事件触发时执行的函数 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。（默认false..
看懂此文，不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
热门推荐
aty
01-28 1万+
抽空学习了下，javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。到这里是不是可以理解addEventListener(type,handler,useCapture)这个API中第三个参数useCapture的含义呢？useCapture=false意味着：将事件处理函数加入到冒泡阶段，在冒泡阶段会被调用；useCapture=true意味着：将事件处理函数加入到捕获阶段，在捕获阶段会被调用至此我们可以给出事件函数执行顺序的结论了：捕获阶段的处理函数最先执行，其次是目标阶段的处理
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Leo的Geo
01-13 591
文章来源：http://www.jb51.net/article/71236.htm DOM事件三个阶段 当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段： 1.捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象； 2.目标阶段：到达目标事件位置（事发地），触发事件； 3.冒泡阶段：再从目标事件
事件捕获和事件冒泡、事件委托
lyn1772671980的博客
01-23 219
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时...
事件冒泡、事件捕获、取消冒泡、取消默认事件
记录点滴
05-11 723
事件冒泡： 只要结构上，非视觉上嵌套关系的元素，或存在事件冒泡的功能，即同一事件，自子元素冒泡到父元素。 如：当点击子元素content时，会向上依次执行（自底向上冒泡）： <div class="wrapper"> <div class="box"> <div class="content"></div> </div> </div> <script> let wra = doc...
事件：事件流、事件对象、事件委托、如何先冒泡后捕获
mkbird的博客
05-03 411
文章目录事件事件流事件对象事件委托（代理、委派） 事件 事件流 事件流描述的是页面接收事件的顺序（比如点击） 可以理解为向水底扔了石头，石头向下为捕获阶段，向上冒泡为冒泡阶段，同理鼠标点击后DOM先向下捕获这次点击事前，捕获后再向上冒泡，中间经过的对应事件处理函数都会被触发 实际开发过程都用冒泡，即没有参数 有些事件没有冒泡，如onblur，onfocus，onmouseenter，onmouseleave 事件冒泡有时会带来麻烦，比如给son和father添加点击事件，点击son，会先弹出son，再弹
JavaScript捕获、冒泡事件执行顺序详解
余阿良的博客
04-12 1165
转自 https://bobscript.com/archives/412/
冒泡和捕获的执行顺序
zsnpromsie的博客
03-29 957
addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture)，其中的event，必须。字符串，指定事件名。 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。function  必须。指定要事件触发时执行的函数useCapture  可选。布尔...
JavaScript事件流与冒泡型事件详解
例如，在例6.1中，当用户点击`<p>`元素时，事件会先触发`<p>`的事件处理函数，接着是包含它的`<div>`，最后是`<body>`。 **例6.1** 展示了冒泡型事件的工作机制。在这个例子中，`<p>`、`<div>`和`<body>`都有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值