Question

在IE中使用方法.attachEvent()，如何使用 this 引用调用者对象（触发事件的元素）？在普通浏览器中，使用.addEventListener，var this指向元素，而在IE中，它指向 window 对象

我需要它来使用以下代码：

var element = //the element, doesn't matter how it is obtained
element.addAnEvent = function(name, funct){
   if(element.addEventListener) // Works in NORMAL browsers...
   else if(element.attachEvent){
     element.attachEvent("on"+name, funct);
     //where the value of "this" in funct should point to "element"
   }
}

我刚刚编写了代码，它与完全与我的代码完全相同，但是如果它与它一起使用，那么它可以与我合作！

Answer 1

this quirksmode article关于attachEvent：

事件总是冒泡，没有捕获的可能性。

引用事件处理函数，而不是复制，因此this关键字始终引用窗口并且完全没用。

这两个弱点的结果是，当事件冒泡时，无法知道哪个HTML元素当前处理该事件。我在事件订单页面上更全面地解释了这个问题。

由于Microsoft事件添加模型仅在Windows上受Explorer 5及更高版本支持，因此不能用于跨浏览器脚本。但即使对于仅在Windows上的Explorer应用程序，最好不要使用它，因为在复杂的应用程序中冒泡问题可能非常糟糕。

我还没有测试过，但可能的解决方法可能是将处理程序包装在一个通过funct.call()调用处理程序的匿名函数中。

else if(element.attachEvent){
   element.attachEvent("on"+name, function(){ funct.call( element ) });
}

对未经测试的解决方案表示歉意。我不喜欢这样做，但现在不能轻易进入IE。

Answer 2

如果你在IE中，你可以通过访问事件处理函数中的window.event.srcElement来获取“调用者”对象。此对象通常称为事件目标或源。

var funct = function(event) {
    if ( !event ) {
        event = window.event;
    }

    var callerElement = event.target || event.srcElement;

    // Do stuff
};

此代码未经测试，但应将您设置为正确的方向。

Answer 3

绑定它。好吧，你不能使用在javascript 1.8.5中添加的Function.prototype.bind，但你可以使用闭包和Function.prototype.apply。

var element = //the element, doesn't matter how it is obtained
element.addAnEvent = function(name, funct){
   if(element.addEventListener) // Works in NORMAL browsers...
     //...
   else if(element.attachEvent){
     element.attachEvent("on"+name, function() {
       //call funct with 'this' == 'element'
       return funct.apply(element, arguments);
     });
   }
}

Answer 4

我认为最好通过原型链扩展Element object，，而不是将您的方法添加到要添加事件的每个元素（使用所有浏览器）..

Element.prototype.addAnEvent = function(name, funct){ if(this.addEventListener) // Works in NORMAL browsers... { this.addEventListener(name,funct, false); } else if(this.attachEvent){ var _this = this; this.attachEvent("on"+name, function(){funct.apply(_this);}); //where the value of "this" in funct should point to "element" } };

这种方式适用于您当前和未来的所有元素（，您只需运行一次）。

如何使用attachEvent引用调用者对象（“this”）

4 个答案:

如何使用attachEvent引用调用者对象（“t​​his”）

4 个答案:

如何使用attachEvent引用调用者对象（“this”）