10.2.6 事件傳播

當(dāng)事件目標(biāo)是Window對(duì)象或其他一些單獨(dú)對(duì)象（比如XMLHttpRequest）時(shí)，瀏覽器會(huì)簡(jiǎn)單的通過(guò)調(diào)用對(duì)象上適當(dāng)?shù)奶幚沓绦蝽憫?yīng)事件。

?

在調(diào)用在目標(biāo)元素上注冊(cè)的事件處理函數(shù)后，大部分事件會(huì)“冒泡”到DOM樹(shù)根。

?

?發(fā)生在文檔元素上的大部分事件都會(huì)冒泡，但有些例外，比如focus、blur和scroll事件。文檔元素上的load事件會(huì)冒泡，但它會(huì)在Document對(duì)象上停止冒泡而不會(huì)傳播到Window對(duì)象。只有當(dāng)整個(gè)文檔都加載完畢時(shí)才會(huì)觸發(fā)window對(duì)象的load事件。

?

當(dāng)事件目標(biāo)是文檔或文檔元素時(shí)，它會(huì)在不同的DOM節(jié)點(diǎn)之間傳播（propagation）。

分為三個(gè)階段：

?

• 捕獲階段（capture phase）：從window對(duì)象傳導(dǎo)到目標(biāo)對(duì)象。（window--document--....--目標(biāo)對(duì)象）
• 目標(biāo)階段（target phase）：目標(biāo)對(duì)象本身的事件處理程序調(diào)用。
• 冒泡階段（bubbling phase）：從目標(biāo)對(duì)象傳導(dǎo)回window對(duì)象。（目標(biāo)對(duì)象--父元素--....--document--window）

?

事件代理（事件委托）

基于事件會(huì)在冒泡階段向上傳播到父節(jié)點(diǎn)，我們可以將子節(jié)點(diǎn)的監(jiān)聽(tīng)事件定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件。這種方法叫做事件的代理（delegation）。

<div id="div"> ??

? <div id="item">123</div> ??

</div>

?

document.getElementById('div').addEventListener('click', function(e) { ??

? var target = e.target; ??

? if(target.getAttribute('id').toLowerCase() == 'item') { ??

? ? alert(1); ??

? } ??

});

如果使用事件代理，以后插入的新節(jié)點(diǎn)仍然可以監(jiān)聽(tīng)的到。

?

如果使用JQuery，我們要為新增節(jié)點(diǎn)添加事件，除了在新增事件后添加事件外，還可以用下面的代碼：

$(document).on('click','div',function(){})

這種方式其實(shí)就是使用了事件代理。

?

10.2.7 事件取消

用屬性注冊(cè)的世界處理程序的返回值能用于取消事件的瀏覽器默認(rèn)操作。在支持addEventListener()的瀏覽器中，也能通過(guò)調(diào)用事件對(duì)象的preventDefault()方法取消事件的默認(rèn)操作。

在IE9之前的IE中，可以通過(guò)設(shè)置事件對(duì)象的returnValue屬性為false來(lái)達(dá)到同樣的效果。

function cancelHandler(event){

? var event = event || window.event;

? if(event.preventDefault) {event.preventDefault();} ?//標(biāo)準(zhǔn)

??if(event.returnValue) { event.returnValue = false;} ?// IE

? return false; //用于處理使用對(duì)象屬性注冊(cè)的處理程序

}

?

Event對(duì)象提供了一個(gè)屬性defaultPrevented，返回一個(gè)布爾值，默認(rèn)false，表示該事件是否調(diào)用過(guò)preventDefault方法。

?

取消事件傳播

在支持addEventListener()的瀏覽器中，可以調(diào)用事件對(duì)象的一個(gè)stopPropagation()方法以阻止事件的繼續(xù)傳播。

e.stopPropagation()

//IE

e.cancelBubble = true;

?

在Event對(duì)象上還有一個(gè)方法stopImmediatePropagation()，阻止同一個(gè)事件的其他監(jiān)聽(tīng)函數(shù)被調(diào)用。也就是說(shuō)，如果同一個(gè)節(jié)點(diǎn)對(duì)于同一個(gè)事件指定了多個(gè)監(jiān)聽(tīng)函數(shù)，這些函數(shù)會(huì)根據(jù)添加的順序依次調(diào)用。只要其中有一個(gè)監(jiān)聽(tīng)函數(shù)調(diào)用了stopImmediatePropagation方法，其他的監(jiān)聽(tīng)函數(shù)就不會(huì)再執(zhí)行了。

e.addEventListener('click',function(event){

? event.stopImmediatePropagation();

});

e.addEventListener('click',function(event){ ??

? //不會(huì)觸發(fā)

});

?

著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
原文:?http://ghmagical.com/article/page/id/nXCnaSLsuyWd???ghmagical.com

轉(zhuǎn)載于:https://www.cnblogs.com/y-lin/p/6404937.html

總結(jié)

以上是生活随笔為你收集整理的event事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。