JavaScript移除匿名事件處理函數的方法

用addEventListener()和attachEvent()給一個DOM元素綁定事件處理程序時，如果傳入一個匿名函數，那麼用對應的removeEventListener()和detachEvent()是無法將這個匿名的處理程序解除綁定的。所以我們用的時候應該要傳入一個函數表達式。

那麼，想使用匿名函數進行綁定和解綁，怎麼解決？

想法

這兩個函數都不接受匿名函數進行解綁，那麼就不能依靠他們來管理事件了，所以自訂一個物件來事件。
事件處理程序的本質就是，當一個事件在一個物件上發生時，執行監聽這個事件的函數。

一個DOM元素可能被綁定多個事件類型的處理程序。例如click的時候顏色改變，mouseover的時候變大。

一個事件類型可能會綁定多個事件處理程序。例如mouseover的時候又變色又變大。

所以，這個事件物件應該有一個屬性用來儲存這個DOM元素上綁定的所有事件處理程序，也應該有兩個方法，一個用來添加，一個用來刪除。

{
    handlers:{
    type1:[handler1,handler2],
    type2:[handler1,handler2],    ...//其他事件类型和对应的事件处理函数
    },
    on:function(){},
    off:function(){}
}

當一個事件發生時，就呼叫這個物件裡面對應的事件類型的陣列裡面的所有函數。

所以綁定事件就是往對應的陣列裡面加入函數，解除綁定事件就是把這個函數從這個陣列裡面刪掉。

那麼怎麼保證操作的是那個正確的DOM元素呢？

顯然，每個DOM元素都應該需要一個這樣的對象，用來管理自己的事件處理程序。讓這個事件管理對象成為dom元素的屬性就保證了操作的是正確的dom元素

實作

每個DOM元素都需要這樣一個對象，而且每個對像中的on ()和off()方法都是相同的，所以需要一個建構函數，把這兩個方法放到他的原型物件中去。

    function EventManage() {
        this.handlers = {}
    }
    EventManage.prototype = {
        on: function (type, handler) {
            if (!this.handlers[type]) {
                this.handlers[type] = [handler]                return true //避免添加多个事件
            } else {
                this.handlers[type].push(handler)
            }
        },
        off: function (type, handler) {
            for (var i = 0; i < this.handlers[type].length; i++) {
                if (this.handlers[type][i].toString() == handler.toString()) {
                    this.handlers[type].splice(i, 1);
                }
            }
        }
    }

每個物件有了這兩個方法，就可以自行新增和移除事件處理程序了，但是，監聽事件，還是要靠JavaScript提供的方法，所以藉用addEventListner()和attachEvent( )來監聽事件：

    var EventUtil = {};
    EventUtil.on = function (ele, type, handler) {
        if (!ele.event) {
            ele.event = new EventManage();
            console.log(ele.event.handlers)
        }
        var isNewType = ele.event.on(type, handler);
        var fire = function () {            for (var i = 0; i < ele.event.handlers[type].length; i++) {
                ele.event.handlers[type][i]();
            }
        }        if (isNewType) {            if (ele.addEventListener) {
                ele.addEventListener(type, fire, false);
            } else {
                ele.attachEvent("on" + type, fire)
            }
        }
    }
    EventUtil.off = function (ele, type, handler) {
        ele.event.off(type, handler);
    }

這裡要注意一個問題，每次使用EventUtil.on()時都會重新定義一個fire函數，addEventListener()就會在相同的事件類型中加入多個相同的事件處理程序，所以需要判斷這個事件類型是不是新增的，如果是的話再用addEventListener()來監聽這個事件類型。

使用範例：

var btn=document.getElementById(“btn”);
EventUtil.on(btn,”click”,function(){ 
  console.log(“11”);
}); EventUtil.on(btn,”click”,function(){ 
  console.log(“22”); }); EventUtil.off(btn,”click”,function(){ 
  console.log(“11”); });

以上是JavaScript移除匿名事件處理函數的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！