Jquery封装之----事件绑定(一)

本文探讨了在非IE浏览器中实现事件绑定的最佳实践,包括解决IE浏览器存在的问题、跨浏览器兼容性处理以及改进this指向的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在今天的博客中,有些问题比较突出,所以要多多注意
一.问题所在
现代绑定中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.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册
都被忽略;
这几点经过测试,并不需要做什么改变,所以后面的几点也就没有什么变化了,个人觉得有点画蛇添足了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen's

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值