JavaScript系列之事件冒泡机制简介

缺乏、安全感 2021-08-13 15:29 339阅读 0赞

JavaScript系列之事件冒泡机制

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡顺序是由内到外进行事件传播，事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。

听了简介介绍之后，您可能不理解，所以举个例子：

<html>
    <head>
    <title>js事件冒泡测试</title>
    </head>
    <body>
    <div id='content' onclick='alert("content")'>
    <div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
    <li onclick='alert("li");'>test</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

点击test页签，会依次执行li的onclick、ul的onclick、div的onclick，content的onclick，从内到外执行，所以这个就是冒泡事件的简单例子

最近也遇到了这种情况，所以就去网上搜索资料，简单学习一下，就是点击一个按钮的时候，竟然触发了两次，通过排查，发现了冒泡机制导致的，解决方法是禁用事件冒泡机制

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

$(element).click(function(e){ 
       e.stopPropagation();//ie e.cancelBubble = true
    });

当然除了冒泡机制会导致onclick被调用两次外，事件被绑定2次的情况也有可能，解决方法是解除事件，然后再绑定

$(element).unbind('click').click(function() { 
            // todo 
    })

参考资料：  
JavaScript 详说事件机制之冒泡、捕获、传播、委托：[https://www.cnblogs.com/bfgis/p/5460191.html][https_www.cnblogs.com_bfgis_p_5460191.html]

[https_www.cnblogs.com_bfgis_p_5460191.html]: https://www.cnblogs.com/bfgis/p/5460191.html

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript事件机制之冒泡、捕获、传播、委托

javascript事件机制之冒泡、捕获、传播、委托][javascript] 转载于:https://www.cnblogs.com/hool/p/11320112....

冷不防/ 2024年04月20日 10:52/ 0 赞/ 65 阅读

相关 JavaScript中的事件冒泡和事件捕获机制

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 事件冒泡和事件捕获机制 ⭐ 事件冒泡（Event Bubbling） ⭐ 事件捕获（Event Cap

拼搏现实的明天。/ 2023年10月14日 23:29/ 0 赞/ 55 阅读

相关 JavaScript 冒泡事件 / 事件的传播

冒泡事件定义子级标签触发事件，JavaScript中，父级程序默认也会触发相同类型的事件，这样的效果，称为冒泡事件。规则只与标签在HTML中

逃离我推掉我的手/ 2023年07月23日 03:56/ 0 赞/ 60 阅读

相关 JavaScript（DOM）事件流--事件捕获、事件冒泡、阻止事件冒泡

DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 DOM事件流分为3个阶段：捕获阶段

阳光穿透心脏的1/2处/ 2022年12月23日 15:23/ 0 赞/ 338 阅读

相关 JavaScript的冒泡事件

addEventListener() 方法 > document.getElementById("myBtn").addEventListener("click", do

川长思鸟来/ 2022年01月29日 02:23/ 0 赞/ 223 阅读

相关 JavaScript 事件冒泡简介及应用（转）

[http://www.jb51.net/article/21801.htm][http_www.jb51.net_article_21801.htm] 一、什么是事件冒泡

Love The Way You Lie/ 2022年01月11日 23:19/ 0 赞/ 201 阅读

相关 javascript之事件捕获与冒泡

说到JavaScript的事件，就会牵扯到事件的捕获与冒泡两个概念。通过代码去理解 <div id="grand1"> 爷爷

一时失言乱红尘/ 2021年09月20日 00:04/ 0 赞/ 441 阅读

相关 JavaScript系列之事件冒泡机制简介

JavaScript系列之事件冒泡机制 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡顺序是由内到外进行事件传播，事件

缺乏、安全感/ 2021年08月13日 15:29/ 0 赞/ 340 阅读

相关 JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者

朱雀/ 2021年05月12日 11:55/ 0 赞/ 519 阅读

相关 JavaScript 事件冒泡

JavaScript 事件冒泡 JavaScript事件传播分为两个阶段：（1）.事件捕获阶段。（2）.事件冒泡阶段。考虑到文章篇幅问题，本文只介绍事件冒泡。大...

小灰灰/ 2020年06月02日 14:36/ 0 赞/ 822 阅读