關於瀏覽器事件addEventListener()處理小記

前言

當瀏覽器與對象 , 元素髮生互動時 , 瀏覽器會產生對應的事件 , 例如 : 瀏覽器加載完文檔 , 用戶把鼠標指針移動超鏈接上或者敲擊鍵盤等 , 瀏覽器都會產生事件 , 而且JavaScript還可以對一些特定類型的事件進行函數綁定以做一些自定義的事件

EventTarget.addEventListener()

EventTarget.addEventListener() 方法將指定的監聽器註冊到 事件目標( EventTarget ) 上，當該對象觸發指定的事件時，指定的回調函數就會被執行。 事件目標( EventTarget )可以是一個文檔上的元素 Element,Document和Window或者任何其他支持事件的對象 (比如 XMLHttpRequest)。
addEventListener()的工作原理是將實現 事件目標( EventTarget ) 的函數或對象添加到調用它的 事件目標( EventTarget ) 上的指定事件類型的事件偵聽器列表中。

EventTarget.addEventListener()語法

• target.addEventListener(type, listener, useCapture);

表一

參數	說明
type	表示監聽事件類型的字符串
listener	當所監聽的事件類型觸發時，會接收到一個事件通知（實現了 Event 接口的對象）對象。listener 必須是一個實現了 EventListener 接口的對象，或者是一個函數
useCapture	Boolean，在DOM樹中，註冊了listener的元素， 是否要先於它下面的EventTarget，調用該listener。 當useCapture(設爲true) 時，沿着DOM樹向上冒泡的事件，不會觸發listener。當一個元素嵌套了另一個元素，並且兩個元素都對同一事件註冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。 如果沒有指定， useCapture 默認爲 false 。

簡單實現

 

<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 的簡單實現

 

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);};

結語

本來以爲addEventListener是一塊小蛋糕 , 可以好好啃一下 , 發現越啃越難啃 , 然後只能淺淺的舔了一小口 , 加上工作繁忙 , 然後就啃不下去了