首頁  >  文章  >  web前端  >  JavaScript移除匿名事件處理函數的方法

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

小云云
小云云原創
2018-03-17 10:59:502815瀏覽


用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn