js window 事件

 window.onXX这个,在w3c规范中有专门的定义,叫DOM第0级事件模型。在当今所有的浏览器中都有实现。但是缺点是,只能绑定一个事件处理函数。且不具备多事件排程绑定的功能
addEventListener。在w3c标准中,叫DOM第2级事件模型。用来弥补window.onXX的不足。但是ie不支持,IE的多重事件绑定方法是attachEvent。特别要说一下,attachEvent和addEventListener实现的功能并非是完全一样的。不同点如下:
1.attachEvent不支持捕获阶段,只支持冒泡阶段,而addEventListener可以通过最后一个参数设定
2.attachEvent在ie6(可能7上也有)在设置了handler function之后,在function内部调用this,并不能正确指向调用对象,而是直接指向了window。

所以一般绑定事件,如果要支持全浏览器,且不用绑定多个handler,建议用DOM第0级事件模型
如果要支持全浏览器,且需要绑定多个handler,不使用捕获阶段,可以用DOM第2级事件模型+attachEvent。
参考代码如下:

function addEventListener(control, eventName, fn) {
    if (window.attachEvent) {
        // 解决IE attachEvent this指向window对象的Bug
        control.attachEvent('on' + eventName, function(e) {fn.call(control, e);});
    } else if (window.addEventListener) {
        control.addEventListener(eventName, fn, false);
    } else {
        control['on' + eventName] = fn;
    }
}
进阶代码如下:
addEventListener = function() {
    if (window.attachEvent) {
        return function(control, eventName, fn) {
            // 解决IE attachEvent this指向window对象的Bug
            control.attachEvent('on' + eventName, function(e) {fn.call(control, e);});
        };
    } else if (window.addEventListener) {
        return function(control, eventName, fn) {
            control.addEventListener(eventName, fn, false);
        };
    } else {
        return function(control, eventName, fn) {
            control['on' + eventName] = fn;
        };
    }
};


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值