本文主要是介绍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
这篇关于js框架开发之旅--事件二的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!