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

Question

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

我需要它与以下代码一起工作：

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

来自这篇 quirksmode 文章中关于 attachEvent 的内容：

1. 事件总是冒泡，没有捕获的可能性。
2. 事件处理函数是引用的，而不是复制的，因此 this 关键字始终引用窗口，完全没有用处。

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

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

我还没有测试过它，但可能的解决方法是将处理程序包装在一个匿名函数中，该函数通过 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 对象 会更好， 通过原型链，而不是将您的方法添加到要添加事件的每个元素（适用于所有浏览器）。

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

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