前言
當(dāng)瀏覽器與對(duì)象 , 元素發(fā)生互動(dòng)時(shí) , 瀏覽器會(huì)產(chǎn)生對(duì)應(yīng)的事件 , 例如 : 瀏覽器加載完文檔 , 用戶把鼠標(biāo)指針移動(dòng)超鏈接上或者敲擊鍵盤(pán)等 , 瀏覽器都會(huì)產(chǎn)生事件 , 而且JavaScript還可以對(duì)一些特定類(lèi)型的事件進(jìn)行函數(shù)綁定以做一些自定義的事件
EventTarget.addEventListener()
EventTarget.addEventListener() 方法將指定的監(jiān)聽(tīng)器注冊(cè)到 事件目標(biāo)( EventTarget ) 上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行。 事件目標(biāo)( EventTarget )可以是一個(gè)文檔上的元素 Element,Document和Window或者任何其他支持事件的對(duì)象 (比如 XMLHttpRequest)。
addEventListener()的工作原理是將實(shí)現(xiàn) 事件目標(biāo)( EventTarget ) 的函數(shù)或?qū)ο筇砑拥秸{(diào)用它的 事件目標(biāo)( EventTarget ) 上的指定事件類(lèi)型的事件偵聽(tīng)器列表中。
EventTarget.addEventListener()語(yǔ)法
- target.addEventListener(type, listener, useCapture);
表一
| 參數(shù) | 說(shuō)明 |
|---|---|
| type | 表示監(jiān)聽(tīng)事件類(lèi)型的字符串 |
| listener | 當(dāng)所監(jiān)聽(tīng)的事件類(lèi)型觸發(fā)時(shí)，會(huì)接收到一個(gè)事件通知（實(shí)現(xiàn)了 Event 接口的對(duì)象）對(duì)象。listener 必須是一個(gè)實(shí)現(xiàn)了 EventListener 接口的對(duì)象，或者是一個(gè)函數(shù) |
| useCapture | Boolean，在DOM樹(shù)中，注冊(cè)了listener的元素， 是否要先于它下面的EventTarget，調(diào)用該listener。 當(dāng)useCapture(設(shè)為true) 時(shí)，沿著DOM樹(shù)向上冒泡的事件，不會(huì)觸發(fā)listener。當(dāng)一個(gè)元素嵌套了另一個(gè)元素，并且兩個(gè)元素都對(duì)同一事件注冊(cè)了一個(gè)處理函數(shù)時(shí)，所發(fā)生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式?jīng)Q定了元素以哪個(gè)順序接收事件。 如果沒(méi)有指定， useCapture 默認(rèn)為 false 。 |
簡(jiǎn)單實(shí)現(xiàn)
<div id="outside">
<div id="t1">one</div>
<div id="t2">two</div>
</div>
<script>
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
</script>
EventTarget 的簡(jiǎn)單實(shí)現(xiàn)
var EventTarget = function() {
this.listeners = {};
};
EventTarget.prototype.listeners = null;EventTarget.prototype.addEventListener = function(type, callback) {
if(!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);};
結(jié)語(yǔ)
本來(lái)以為addEventListener是一塊小蛋糕 , 可以好好啃一下 , 發(fā)現(xiàn)越啃越難啃 , 然后只能淺淺的舔了一小口 , 加上工作繁忙 , 然后就啃不下去了
