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日历实现代码
Sep 12 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
公司活动总结范文
2014/07/01 职场文书
专家推荐信范文
2015/03/26 职场文书
第二次离婚起诉书
2015/05/18 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js