JavaScript事件冒泡机制原理实例解析


Posted in Javascript onJanuary 14, 2020

这篇文章主要介绍了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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
jquery构造器的实现代码小结
May 16 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
js取模(求余数)隔行变色
May 15 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JS window对象简单操作完整示例
Jan 14 #Javascript
让mocha支持ES6模块的方法实现
Jan 14 #Javascript
JavaScript遍历数组的方法代码实例
Jan 14 #Javascript
JavaScript回调函数callback用法解析
Jan 14 #Javascript
JS document对象简单用法完整示例
Jan 14 #Javascript
JS document内容及样式操作完整示例
Jan 14 #Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 #Javascript
You might like
PHP URL参数获取方式的四种例子
2014/02/28 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python lambda的使用详解
2021/02/26 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
安全生产管理责任书
2014/04/16 职场文书
5s推行计划书
2014/05/06 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
放飞理想演讲稿
2014/09/09 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
社会实践活动总结
2015/02/05 职场文书
面试通知单大全
2015/04/20 职场文书
联欢会开场白
2015/06/01 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
python基础之匿名函数详解
2021/04/21 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers