新博客地址：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居然有这么多问题。
