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.Attribute('href'));
console.log(location.href);
}, false); //a是我已经通过id获得好的⼀个a标签
var event = ateEvent('HTMLEvents'); // initEvent接受3个参数: 事件类型，是否冒泡，是否阻⽌浏览器的默认⾏为
event.initEvent('click', true, true);
event.eventType = 'click';
//触发a上绑定的⾃定义事件
a.dispatchEvent(event);
//注：jQuery中有更简单的trigger()⽅法实现⾃定义事件功能
JavaScript中⾃定义事件的类型有（即ateEvent('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');
input绑定onblur事件
},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);
执⾏结果：
乍⼀看这个结果有些乱，但仔细分析可以得出结论：
绑定在被点击元素的事件是按照代码顺序发⽣，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发⽣捕获事件，后发⽣冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。