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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
vue input标签通用指令校验的实现
Nov 05 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
php echo 输出字符串函数详解
2010/05/13 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP面向对象精要总结
2014/11/07 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python发布模块的步骤分享
2014/02/21 Python
python实现一次创建多级目录的方法
2015/05/15 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python logging模块用法示例
2018/08/28 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
python单向链表实例详解
2022/05/25 Python