JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法


Posted in Javascript onMarch 30, 2017

本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法。分享给大家供大家参考,具体如下:

事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段、有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。

1. 原生事件的发生顺序

一般来讲,当为一个a标签添加click事件以后,点击这个标签,会先执行绑定的事件、后跳转页面。一个input绑定blur事件以后,你在input里输入完内容,点击提交按钮,会先发生blur事件,后发生click事件。当然,这是一般来讲。我在一个React项目中曾经发生表单提交时,先发生click事件,blur事件没有来得及发生,造成表单内容没有检验就提交到后台,原因我至今没有找到,解决办法是在click事件上加一个50ms的延迟。

2. 自定义事件

JavaScript中也支持手动触发事件,请看下面代码。

a.addEventListener('click', function(){
  console.log(input.value);
  console.log(this.getAttribute('href'));
  console.log(location.href);
}, false); //a是我已经通过id获得好的一个a标签
var event = document.createEvent('HTMLEvents'); // initEvent接受3个参数: 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent('click', true, true);
event.eventType = 'click';
//触发a上绑定的自定义事件
a.dispatchEvent(event);
//注:jQuery中有更简单的trigger()方法实现自定义事件功能

JavaScript中自定义事件的类型有(即document.createEvent('HTMLEvents')中的参数):

1. UIEvents:一般化的UI事件。
2. MouseEvents:一般化的鼠标事件。
3. MutationEvents:一般化的DOM变动事件。
4. HTMLEvents:一般化的HTML事件。

自定义事件的发生比较容易控制,你什么时候触发(dispatchEvent/fireEvent)它,它就什么时候发生。

3. 绑定多个事件,且由用户行为触发

这个情况最复杂,也是标题中的情况:父元素与子元素都绑定多个事件,且有的事件在捕获阶段、有的事件在冒泡阶段。

下面这个例子,父元素div绑定两个事件(一个冒泡阶段、一个捕获阶段),子元素也是这种情况。事件触发顺序如何。

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function(){
  console.log('bubble','btn');
},false);
btn.addEventListener('click', function(){
  console.log('capture','btn');
},true);
div.addEventListener('click', function(){
  console.log('bubble','div');
},false);
div.addEventListener('click', function(){
  console.log('capture','div');
},true);

执行结果:

JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

乍一看这个结果有些乱,但仔细分析可以得出结论

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
借助node实战JSONP跨域实例
Mar 30 #Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 #Javascript
You might like
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python生成不重复随机值的方法
2015/05/11 Python
python中实现k-means聚类算法详解
2017/11/11 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Django 反向生成url实例详解
2019/07/30 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
优秀求职信范文分享
2014/01/26 职场文书
歌唱比赛主持词
2014/03/18 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers