javaScript的事件對象

事件流模型

描述的是從頁面中接收事件的順序

事件流主要分爲三種

1. 事件冒泡流（IE時間流）
2. 事件捕獲流（Netscape事件流)
3. DOM事件流

IE事件流和DOM事件流的區別

點擊查看具體區別

DOM事件流的三個階段

• 捕獲階段（網景公司提出）：從外到內 window–document–html–div
• 當前目標階段
• 冒泡階段（IE提出）：從內到外 div–html–document–window

面試題：傳統事件綁定和符合w3c標準的事件綁定有什麼不同

傳統事件綁定：

<input class="btn" type="button" onclick="clickEvent">
document.getElementsByClassName('btn')[0].onclick = function() {}

w3c標準事件綁定：

btn.addEventListener('click', function() {}, false)  
btn.attachEvent('onclick', function() {}) // IE9以前版本支持

刪除傳統事件綁定：

<input class="btn" type="button" onclick="clickEvent">
document.getElementsByClassName('btn')[0].onclick = null;

刪除w3c標準事件綁定：

btn.removeEventListener('click', linsenerName, false) 
btn.detachEvent('onclick', function() {}) // IE9以前版本支持

【注】

1. addEventListener，第三個參默認是false，代表冒泡事件，也可以是對象，有三個屬性：

屬性	作用
capture	布爾值，和 useCapture 作用一樣
once	布爾值，值爲 true 表示該回調只會調用一次，調用後會移除監聽
passive	布爾值，表示永遠不會調用 preventDefault

2. onclick和attachEvent只能得到冒泡階段，有些事件沒有冒泡 eg:onblur, onfucus, onmouseover,onmouseleave
3. 事件觸發一般來說會按照DOM事件流三個階段的順序進行，但是也有特例，如果給一個 body中的子節點同時註冊冒泡和捕獲事件，事件觸發會按照註冊的順序執行

阻止事件冒泡和默認事件

阻止事件冒泡：

標準寫法：event.stopPropogation（）
IE中的寫法(屬性)：event.cancelBubble = true

阻止默認事件

標準寫法：event.preventDefault()
IE中的屬性：event.returnValue = false

【注】

1. event.stopPropogation（）也可以阻止事件捕獲
2. stopImmediatePropagation同樣也能實現阻止事件，但是還能阻止該事件目標執行別的註冊事件。

事件對象的補充

• event.target 返回的是觸發事件的對象
• this 返回的是綁定事件的對象
• event.type 返回的是不帶on
• 事件對象的兼容性寫法： event || window.event
• 事件目標的兼容性寫法： event.target || event.srcElement

事件委託

1. 事件委託又稱事件代理，在JQuery中稱事件委派
2. 原理：不是每個子結點要單獨設置一個事件監聽器，而是事件監聽器設置在父結點上，然後利用事件冒泡原理影響設置每個子結點。
3. 作用：只操作了一次DOM，提高了程序的性能，不需要給子節點註銷事件，節省內存