本文實(shí)例講述了JavaScript實(shí)現(xiàn)父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序的方法。分享給大家供大家參考，具體如下：

事件的執(zhí)行順序絕對(duì)是讓人頭疼的問(wèn)題。當(dāng)父元素與子元素都綁定了多個(gè)事件，且有的綁定在冒泡階段、有的綁定在捕獲階段時(shí)，事件的觸發(fā)順序如何？如果你只關(guān)心這個(gè)問(wèn)題，請(qǐng)直接下滑到3. 綁定多個(gè)事件，且由用戶行為觸發(fā)。如果你想細(xì)致了解JavaScript中的事件發(fā)生，請(qǐng)慢慢閱讀。

1. 原生事件的發(fā)生順序

一般來(lái)講，當(dāng)為一個(gè)a標(biāo)簽添加click事件以后，點(diǎn)擊這個(gè)標(biāo)簽，會(huì)先執(zhí)行綁定的事件、后跳轉(zhuǎn)頁(yè)面。一個(gè)input綁定blur事件以后，你在input里輸入完內(nèi)容，點(diǎn)擊提交按鈕，會(huì)先發(fā)生blur事件，后發(fā)生click事件。當(dāng)然，這是一般來(lái)講。我在一個(gè)React項(xiàng)目中曾經(jīng)發(fā)生表單提交時(shí)，先發(fā)生click事件，blur事件沒(méi)有來(lái)得及發(fā)生，造成表單內(nèi)容沒(méi)有檢驗(yàn)就提交到后臺(tái)，原因我至今沒(méi)有找到，解決辦法是在click事件上加一個(gè)50ms的延遲。

2. 自定義事件

JavaScript中也支持手動(dòng)觸發(fā)事件，請(qǐng)看下面代碼。

a.addEventListener('click', function(){
  console.log(input.value);
  console.log(this.getAttribute('href'));
  console.log(location.href);
}, false); //a是我已經(jīng)通過(guò)id獲得好的一個(gè)a標(biāo)簽
var event = document.createEvent('HTMLEvents'); // initEvent接受3個(gè)參數(shù): 事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為
event.initEvent('click', true, true);
event.eventType = 'click';
//觸發(fā)a上綁定的自定義事件
a.dispatchEvent(event);
//注：jQuery中有更簡(jiǎn)單的trigger()方法實(shí)現(xiàn)自定義事件功能

JavaScript中自定義事件的類型有（即document.createEvent('HTMLEvents')中的參數(shù)）：

1. UIEvents：一般化的UI事件。
2. MouseEvents：一般化的鼠標(biāo)事件。
3. MutationEvents：一般化的DOM變動(dòng)事件。
4. HTMLEvents：一般化的HTML事件。

自定義事件的發(fā)生比較容易控制，你什么時(shí)候觸發(fā)(dispatchEvent/fireEvent)它，它就什么時(shí)候發(fā)生。

3. 綁定多個(gè)事件，且由用戶行為觸發(fā)

這個(gè)情況最復(fù)雜，也是標(biāo)題中的情況：父元素與子元素都綁定多個(gè)事件，且有的事件在捕獲階段、有的事件在冒泡階段。

下面這個(gè)例子，父元素div綁定兩個(gè)事件（一個(gè)冒泡階段、一個(gè)捕獲階段），子元素也是這種情況。事件觸發(fā)順序如何。

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);

執(zhí)行結(jié)果：

乍一看這個(gè)結(jié)果有些亂，但仔細(xì)分析可以得出結(jié)論：

綁定在被點(diǎn)擊元素的事件是按照代碼順序發(fā)生，其他元素通過(guò)冒泡或者捕獲“感知”的事件，按照W3C的標(biāo)準(zhǔn)，先發(fā)生捕獲事件，后發(fā)生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論