attachEvent 中this指向

IE中使用的事件绑定函数与Web标准的不同,而且this指向也不一样,Web标签中的this指向与传统事件绑定中的this一样,是当前目标,但是IE中事件绑定函数中this指向,通过使用call或apply可以改变this指针的指向。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>attachEvent 中this指向</title>
    <script type="text/javascript" src="kingwell.js"></script>
    <script type="text/javascript">
        
        window.onload = function(){

            var test = document.getElementById('test');
            test.onclick = function(){
                //alert(this);//this指向 h1
            }
            test.attachEvent('onclick',function(){
                //alert(this);// this指向window
            });
            test.addEventListener('click',function(){
                //alert(this);//this指向 h1
            },false);
            //传统的绑定跟Web标准中this指向是正确的,都是所绑定的那个对象,但IE的总是指向window,这是错误的
            //只要稍微调整一个,就可以修正这个错误

            var Event = {};
            Event.addEvent = function(target,eventType,handle){
            
                if(document.addEventListener){
                    Event.addEvent = function(target,eventType,handle){
                        target.addEventListener(eventType,handle,false);
                    }
                }else if(document.attachEvent){
                    Event.addEvent = function(target,eventType,handle){
                        target.attachEvent('on'+eventType,function(){
                            handle.call(target,arguments);//改变this指向
                        });
                    }
                }else{
                    Event.addEvent = function(target,eventType,handle){
                        target['on'+eventType] = handle;
                    }
                }
                Event.addEvent (target,eventType,handle);
            }
            Event.addEvent(test,'click',function(){
                alert('我是正确的,我是:'+this);//现在this指向的是正确的了
            });
        }
    </script>
</head>
<body>
<h1 id="test">attachEvent this</h1>
</body>
</html>

 


还有detachEvent也一样,可以通过上面方法实现。

 

转载于:https://www.cnblogs.com/kingwell/p/3294704.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值