欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-12 00:02:52
本文实例讲述了javascript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法。分享给大家供大家参考,具体如下: 事件的执行顺序绝对是让人头...

本文实例讲述了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时间与日期操作技巧总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

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