EventTarget是一個由可以接受事件的對象實現(xiàn)的接口.并且可以為它們創(chuàng)建監(jiān)聽器.
element, document, window是常見的事件目標(biāo),但是其他對象也可以是事件對象(比如XMLHttpRequest).
需要事件目標(biāo)還支持通過on...屬性設(shè)置事件處理函數(shù).
EventTarget.addEventListener
EventTarget.removeEventListener
EventTarget.dispatchEvent
事件階段
當(dāng)一個DOM事件觸發(fā)時,它不是在觸發(fā)的對象上只觸發(fā)一次的, 而是經(jīng)歷三個階段.分別為
- 一開始從文檔的根節(jié)點流向目標(biāo)對象(捕獲階段).
- 然后在目標(biāo)對象上被觸發(fā)(目標(biāo)階段)
- 之后再回溯到文檔的根節(jié)點(冒泡階段)
addEventListener 與事件的冒泡與捕獲
addEventListener的最后一個參數(shù),為true則代表使用事件捕獲模式,false則表示事件冒泡模式.(默認(rèn)為false: 冒泡模式)
阻止事件繼續(xù)冒泡
事件冒泡過程,是可以被阻止的.通過e.stopPropagation().
為什么會有事件冒泡與捕獲兩種模式?
事件流: 流本身含有方向的意思.
可以將dom節(jié)點看做許多個同心圓, 那么結(jié)構(gòu): window -> document -> html -> body -> div -> p可以看做半徑由大到小的一組同心圓,現(xiàn)在假如我們手指向圓心,那么是先執(zhí)行小圓所代表的事件呢,還是大圓所代表的事件呢?
由此衍生出兩種事件模式: 事件冒泡與事件捕獲
EventTarget.removeEventListener
target.removeEventListener(type, listener[, useCapture])
type: 表示需要移除的事件類型.
listener: 需要移除的處理函數(shù).
userCapture: 指定需要移除的事件處理函數(shù)的類型(冒泡或捕獲), 默認(rèn)為false.
如果同一監(jiān)聽事件分別在冒泡階段和捕獲階段分別注冊了一次,則這兩次事件需要分別移除.兩者間互不干擾.
一個EventListener被移除以后,如果此事件正在執(zhí)行,則會立即停止.移除以后可以重新綁定.移除未綁定的EventListener不會起任何作用.
一個例子:
var div = document.querySelector('div')
var fn = function (e) {
/* do something */
}
div.addEventListener('click', fn , false)
div.remoceEventListener('click', fn, false)
