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