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

JavaScript系列之事件冒泡机制简介的更多相关文章

  1. JavaScript中的事件冒泡机制

    事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...

  2. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  3. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  4. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. js的事件冒泡机制

    js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄

  7. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  8. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  9. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  10. 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

随机推荐

  1. WPF 粉笔绘制

    在做白板书写的时候,会有各种笔的绘制,比如 书写笔.马克笔.演示笔等等.粉笔的功能需求也是很有必要的. 上网搜了一圈,几乎没有绘制粉笔的. 有的是毛笔.楷体等绘制的如下博客: wpf inkcanva ...

  2. odoo中常用功能代码小片段

    一.去除字符串的中文.英文 def remove_letters_and_chinese(self,text): """字符串去除字母与中文""&qu ...

  3. odoo16里面修改tree视图样式

    一.在static文件夹下新建一个css文件夹并将*.css文件写入 /*该文件用来定义视图中的一些格式,需要用到的地方直接在xml文件中进行引用*/ /*语法说明*/ /* table th:nth ...

  4. Java 验证电子邮箱是否合法

    工作中,常常遇到校验电子邮箱字符串是否符合规范的需求,这里提供如下两个基于正则表达式的校验方法: public static final String EMAIL_REGEX_DEFAULT = &q ...

  5. 雷池WAF离线安装搭建全流程指南（2025年最新版）

    一.环境要求与准备工作 系统要求 ● 操作系统:Debian12+(推荐大版本一致,如内网使用debian12,在线主机也需debian系列) ● CPU架构:x86_64,需支持SSSE3指令集(可 ...

  6. MinHook 如何对.NET底层的 Win32函数 进行拦截（上）

    一:背景 1. 讲故事 在前面的系列中,我们聊过.NET外挂 harmony,他可以对.NET SDK方法进行拦截,这在.NET高级调试领域中非常重要,但这里也有一些遗憾,就是不能对SDK领域之外的函 ...

  7. 【Electron】记录一下常用代码

    macOS 实现毛玻璃效果 function createWindow() { const mainWindow = new BrowserWindow({ width: 960, height: 6 ...

  8. HyperWorks分析模型的建立与边界条件施加

    在HyperWorks完成了基本的网格剖分后,还需要赋予模型各类与求解相关的信息,方能最终生成可以递交求解器计算的输入文件.分析模型的建立与载荷及边界条件的创建包括以下内容: -定义待输出的目标求解器 ...

  9. Xamarin.Andorid 监听 EditText 回车事件

    EditText ET_Billcode.EditorAction += ET_Billcode_EditorAction; //执行方法 private void ET_Billcode_Edito ...

  10. C# DES (cbc) 加密解密 (最简单的加密解密)

    https://www.cnblogs.com/tianma3798/p/8807906.html 感谢这位大哥的代码提示 微软官网的这个示例正的是该换了,一点用处没看出来 https://docs. ...