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

本文阐述了JavaScript实现两个点击事件绑定的方法，一个是捕获，另一个是冒泡执行序列。分享给大家参考，如下：

事件的执行顺序绝对让人头疼。当多个事件同时绑定到父元素和子元素，有的绑定在冒泡阶段，有的绑定在捕获阶段时，事件的触发顺序是什么？如果你只关心这个问题，请下滑到3。绑定多个事件并由用户行为触发。如果你想仔细了解JavaScript中的事件，请慢慢看。

1.主要事件的发生顺序

一般来说，在A标签中添加点击事件后，点击这个标签会先执行绑定的事件，然后跳转到页面。输入绑定模糊事件后，在输入中输入内容并点击提交按钮后，首先会发生模糊事件，然后会发生点击事件。当然，这是一般意义上的。我在一个React项目中提交表单时，首先发生的是点击事件，之前发生的是模糊事件，导致表单内容未经检查就被提交到后台。我还没找到的原因是，解决方法是给点击事件增加50毫秒的延迟。

2.自定义事件

JavaScript也支持手动触发事件，请看下面的代码。

a.addEventListener('click ')，function(){ console . log(input . value)；console . log(this . GetAttribute(' href '))；console . log(location . href)；}，false)；//a是一个a标记varevent=document。我通过id获得的create event(' htmlevents ')；//initEvent接受三个参数：事件类型、是否冒泡、是否阻止浏览器默认行为事件。initevent ('click '，true，true)；event.eventType=' click//触发绑定在上的自定义事件a.dispatchEvent(事件);//注意：jQuery中有一个更简单的trigger()方法来实现自定义事件函数。JavaScript中自定义事件的类型有(即document . createevent(' htmlevents ')中的参数):

1.UIEvents:广义的UI事件。2.鼠标事件：广义的鼠标事件。3.突变事件：广义的DOM变化事件。4.HTML事件：广义的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 ')；}，真)；div.addEventListener('click '，function(){ console.log('bubble '，' div ')；}，false)；div.addEventListener('click '，function(){ console . log(' capture '，' div ')；}，真)；执行结果：

乍一看，这个结果有些混乱，但仔细分析可以得出结论：

绑定到被点击元素的事件以代码顺序发生，其他元素冒泡或捕获“感知”事件。根据W3C标准，首先发生捕获事件，然后发生气泡事件。所有事件的顺序为：其他元素捕获阶段事件-此元素代码序列事件-其他元素气泡阶段事件。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》。

希望本文对JavaScript编程有所帮助。