本文实例讲述了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);执行结果：
乍一看这个结果有些乱，但仔细分析可以得出结论：
绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
