js框架开发之旅--事件二

由于老外的叙事实在罗嗦，因此我以后仅仅翻译重点的东西，或者自己进行整理总结，如有错误之处，还请看官指正。

W3C标准和IE的差异

W3C标准绑定事件的方法

element.addEventListener('click', function() { }, false);

IE绑定事件的方法

var handler = function() { };
element.attachEvent('onclick', handler);
element.detachEvent('onclick', handler);

使用能力探测来适配两者之间的不同：

if (element.addEventListener) {
  element.addEventListener(type, responder, false);
} else if (element.attachEvent) {
  element.attachEvent('on' + type, responder);
}

IE事件绑定中存在的两个问题：
1.内存泄露
大部分框架使用缓存记录事件的绑定，并在onunload事件中对绑定的事件进行清理。
2.event和target

event可以通过window.event获取，target可以通过event.srcElement代替。

验证元素

对于传进来的元素，我们首先要确定它是否可以添加事件。根据元素的nodeType属性可以确定节点的类型：

• 元素 element 1
• 属性 attr 2
• 文本 text 3
• 注释 comments 8
• 文档 document 9

我们要在元素中过滤掉文本节点和注释节点：

function isValidElement(element) {
  return element.nodeType !== 3 && element.nodeType !== 8;
}

接口设计

接口设计参考W3C标准：

• 添加事件：turing.events.add(element, type, callback)
• 删除事件：turing.events.remove(element, type, callback)
• 触发事件：turing.events.fire(element, type)
• 使用event获取事件对象，提供target属性获取目标元素

参考阅读

• Document Object Model Events
• Node.nodeType
• Understanding and Solving Internet Explorer Leak Patterns
• srcElement Property
• createEventObject Method
• QuirksMode on registration models
• addEvent() recoding contest
• Prototype’s event.js
• jquery’s event.js