Jquery封装之----事件绑定（一）

在今天的博客中，有些问题比较突出，所以要多多注意

一．问题所在

现代绑定中W3C 使用的是：addEventListener 和removeEventListener。IE 使用的是

attachEvent 和detachEvent。我们知道IE 的这两个问题多多，并且伴随内存泄漏。所以，解

决这些问题非常有必要。

那么我们希望解决非IE 浏览器事件绑定哪些问题呢？

1.支持同一元素的同一事件句柄可以绑定多个监听函数；

2.如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册

都被忽略；

3.函数体内的this 指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节

点）；

4.监听函数的执行顺序应当是按照绑定的顺序执行；

5.在函数体内不用使用event = event || window.event; 来标准化Event 对象；

二．设置代码

//跨浏览器添加事件

function addEvent(obj, type, fn) {

if (typeof addEventListener != 'undefined') {

obj.addEventListener(type, fn, false);

} else if (typeof attachEvent != 'undefined') {

obj.attachEvent('on' + type, fn);

}

}

//跨浏览器删除事件

function removeEvent(obj, type, fn) {

if (typeof removeEventListener != 'undefined') {

obj.removeEventListener(type, fn);

} else if (typeof detachEvent != 'undefined') {

obj.detachEvent('on' + type, fn);

}

}

上面的这两个函数解决了：1.同时绑定多个函数；2.标准event；

上面的这两个函数没有解决的问题：1.IE 多次注册同一函数未被忽略；2.IE 中顺序是倒

序；3.IE 中this 传递过来的是window

/*

这里需要特别注意的是，经过我的测试，IE传过来的并不是window，传过来的依然是点击按钮的值

*/

为了解决this 传递问题，我们需要使用匿名函数+传递方式参数的方式来解决：

obj.attachEvent('on' + type, function () {

fn(obj);

});

addEvent(oButton, 'click', function (_this) {

alert(_this.value);

});

这种方式比较古板，更好一点的方式是使用call 来冒充对象。

obj.attachEvent('on' + type, function () {

fn.call(obj);

});

addEvent(oButton, 'click', function () {

alert(this.value);

});

call 的用法回忆一下：

fn.call(obj); //this 就是obj 对象

fn.call(123); //this 就是123

fn.call(123,456); //this 就是123，第一个参数是456

PS：也就是说，使用了call 第一个参数就是this 获取，从第2 个参数开始，可以通过函

数参数获取，以此类推。

使用了call 传递this，带来的诸多另外的问题：1.无法标准化event；2.无法删除事件。

导致的原因很明确，就是使用了匿名函数。标准化event 可以解决，无法删除事件就没有办

法了，因为无法确定是哪一个事件。

obj.attachEvent('on' + type, function () {

fn.call(obj, window.event);

});

在这里我还要声明一下，不知道是不是我是window10的问题，在上述的1,2点，在我的电脑上是没有问题的，在我的电脑上

1.支持同一元素的同一事件句柄可以绑定多个监听函数；

2.如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册

都被忽略；

这几点经过测试，并不需要做什么改变，所以后面的几点也就没有什么变化了，个人觉得有点画蛇添足了。