10.2.6 事件傳播

當事件目標是Window對象或其他一些單獨對象（比如XMLHttpRequest）時，瀏覽器會簡單的通過調用對象上適當的處理程序響應事件。

?

在調用在目標元素上注冊的事件處理函數后，大部分事件會“冒泡”到DOM樹根。

?

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

?

當事件目標是文檔或文檔元素時，它會在不同的DOM節點之間傳播（propagation）。

分為三個階段：

?

• 捕獲階段（capture phase）：從window對象傳導到目標對象。（window--document--....--目標對象）
• 目標階段（target phase）：目標對象本身的事件處理程序調用。
• 冒泡階段（bubbling phase）：從目標對象傳導回window對象。（目標對象--父元素--....--document--window）

?

事件代理（事件委托）

基于事件會在冒泡階段向上傳播到父節點，我們可以將子節點的監聽事件定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫做事件的代理（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); ??

? } ??

});

如果使用事件代理，以后插入的新節點仍然可以監聽的到。

?

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

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

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

?

10.2.7 事件取消

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

在IE9之前的IE中，可以通過設置事件對象的returnValue屬性為false來達到同樣的效果。

function cancelHandler(event){

? var event = event || window.event;

? if(event.preventDefault) {event.preventDefault();} ?//標準

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

? return false; //用于處理使用對象屬性注冊的處理程序

}

?

Event對象提供了一個屬性defaultPrevented，返回一個布爾值，默認false，表示該事件是否調用過preventDefault方法。

?

取消事件傳播

在支持addEventListener()的瀏覽器中，可以調用事件對象的一個stopPropagation()方法以阻止事件的繼續傳播。

e.stopPropagation()

//IE

e.cancelBubble = true;

?

在Event對象上還有一個方法stopImmediatePropagation()，阻止同一個事件的其他監聽函數被調用。也就是說，如果同一個節點對于同一個事件指定了多個監聽函數，這些函數會根據添加的順序依次調用。只要其中有一個監聽函數調用了stopImmediatePropagation方法，其他的監聽函數就不會再執行了。

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

? event.stopImmediatePropagation();

});

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

? //不會觸發

});

?

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文:?http://ghmagical.com/article/page/id/nXCnaSLsuyWd???ghmagical.com

轉載于:https://www.cnblogs.com/y-lin/p/6404937.html

總結

以上是生活随笔為你收集整理的event事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。