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

Question

使用该方法.attachEvent()在IE中，我怎样才能引用该呼叫者与对象（即触发事件的元素） 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

从这篇关于attachEvent quirksmode文章 ：

1. 事件总是冒泡，没有捕获的可能性。
2. 引用事件处理函数，而不是复制， 因此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 ，但你可以使用closure和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对象 ，而不是将你的方法添加到你想要添加事件的每个元素（ 适用于所有浏览器 ）。

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"
   }
};

这样它将适用于您当前和未来的所有元素（ 并且您只需运行一次 ）。