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