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 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
js 处理URL实用技巧
Nov 23 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
js中unicode转码方法详解
Oct 09 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
简单实现节流函数和防抖函数过程解析
Oct 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读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python交互界面的退出方法
2019/02/16 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
美化环境标语
2014/06/20 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python