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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
js 图片懒加载的实现
Oct 21 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
德劲1104的电路分析与改良
2021/03/01 无线电
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Django之模板层的实现代码
2019/09/09 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
超市中秋节促销方案
2014/03/21 职场文书
学校募捐倡议书
2014/05/14 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
小学生成绩单评语
2014/12/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL