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中注册和移除事件的4种方式
Mar 20 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
mysql 搜索之简单应用
2007/04/27 PHP
php 分页函数multi() discuz
2009/06/21 PHP
php获取域名的google收录示例
2014/03/24 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
小学生获奖感言范文
2014/02/02 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电