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 JSQL,SQL无处不在,
May 05 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue 实现走马灯效果
Oct 28 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP中的超全局变量
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Javascript的比较汇总
2016/07/25 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python web框架中实现原生分页
2019/09/08 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
电子商务自荐书范文
2014/01/04 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
还款承诺书范本
2015/01/20 职场文书
幼师小班个人总结
2015/02/12 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
MySQL 计算连续登录天数
2022/05/11 MySQL