我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //event handler logic }; 然而这种方式一次只能添加一个事件处理函数,不具有通用性。 (2) 对于符合最新W3C标准的浏览器(IE>8,chrome,firefox,android)可以使用element.addEventListener,将事件类型作为一个参数传递。 element.addEventListener(‘click’,function(){ //event handler logic },false); element.addEventListener是支持添加多个事件的,调用顺序是事件添加顺序。并且我们可以通过传递第三个参数来控制事件的触发时机是捕获阶段还是冒泡阶段,默认为冒泡阶段。然而低版本的IE(<=8)不支持element.addEventListener。 (3)对于低版本的IE(<=8)相应的提供了element.attachEvent: element.attachEvent(‘onclick’,function(){ //event handler }); element.attachEvent的事件类型参数格式必须是on+事件类型,但是监听函数内部的this指针指向的却不是触发事件的element。 由此可见,以上三种方法直接使用原生API的方法都是有问题的或者说不完美的。 2.Dean Edwards大牛的实现 Dean Edwards在2005年写的了addevent的库,用于处理对浏览器的兼容性问题。理解了这个addEvent库,我们可以更好的理解jQuery的事件系统。 //事件添加方法 addEvent.guid = 1;… Read More