新博客地址：http://gengliming.com
把昨天看的關于addEvent的文章總結一下
分析一下傳統addEvent的實現：
// 傳統寫法大致上是這樣
// 作者：Scott Andrew
function addEvent(obj, type, fn, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, useCapture);
return true
} else if (obj.attachEvent) {
var r = obj.attachEvent("on"+type, fn);
return r;
} else {
alert("事件處理器不能附加");
}
}
優勢：
1、沒有限制的程序處理，可以添加任意多個；
2、避免ie的內存問題：有一個中央函數來來設置事件處理程序，這種方法允許你對所有的事件處理程序保存在數組或對象中，這樣在unload方法中就可以移除事件處理器與dom元素的綁定。
當然也是有問題的：
1、addEventListener和attachEvent的區別：猛戳這里-The this keyword；
2、類似foldout菜單，每個li中有個a標簽，當mouseover和mouseout的時候修改li的class。那我在handler中怎么拿到li呢？既然this在The this keyword提到是有問題的，那用event.target來獲取li從而修改class呢？很可惜，li被a蓋住了，所以target獲取到的是a。
看看專家Dean.Edwards是如何實現的：
// 作者：Dean.Edwards
function addEvent(element, type, handler) {
// 為每個handler賦值一個唯一的ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// 為element創建一個事件類型的hash表
if (!element.events) element.events = {};
// 為每個element/event對兒創建一個事件handler的hash表
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// 保存已有的事件處理程序（如果有一個的話）
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// 把handler保存在hash表
handlers[handler.$$guid] = handler;
// 賦值一個全局事件處理程序來做所有的工作
element["on" + type] = handleEvent;
}; // 這里為何加分號
// 用來創建唯一ID的計數器
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// 從hash表刪除事件處理程序
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}; // 這里為何加分號
function handleEvent(event) {
// 拿到event對象（ie是全局event對象）
event = event || window.event;
// 得到事件處理程序的hash表的引用
var handlers = this.events[event.type];
// 執行每個時間處理器
for (var i in handlers) {
this.$$handleEvent = handler[i];
this.$$handleEvent(event);
}
}
這樣的好處是什么呢？
- 1、沒有對象檢測；
- 2、沒有使用addeventListener/attachEvent；
- 3、保證了正確的作用域（指this關鍵字）；
- 4、正確的傳遞了event對象；
- 5、完全的跨瀏覽器（ie4或ns4可能也能正常使用）；
- 6、 并且讓我說的話，它是沒有內存泄漏的。
參考
addEvent() – My Solution：js專家的addEvent是這么寫的；
The this keyword：this關鍵字在事件中的不同表現；
addEvent() considered harmful：通用的addEvent居然有這么多問題。
