javascript - 在原型(prototype)中绑定(bind)事件处理程序并仍然保持对元素的引用

Question

我希望能够在原型(prototype)中使用绑定(bind)事件处理程序并保留我的“this”上下文。但这样做似乎破坏了原型(prototype)为事件处理程序提供的方便的默认绑定(bind)。

来自文档:

The handler's context (this value) is set to the extended element being observed (even if the event actually occurred on a descendent element and bubbled up).

这正是我想要的。一旦我将函数绑定(bind)到我自己的上下文中，我能否以任何方式访问这个“被观察的元素”？我不能依赖 e.element() 给我观察到的元素(它可能是一个子元素):

initialize: function() {
     Event.observe('foo', 'click', this.addItem.bind(this));
},

...

addItem: function(e) {
   e.element() // -> clicked element, not necessarily observed element
}

我知道有一个 bindAsEventListener，但这里似乎没有必要，而且我不知道如何在函数绑定(bind)后访问目标元素。

我也知道有一个 e.currentTarget，但这在 IE 中不起作用，是吗？

Answer 1

当您使用 .bind 时，您通过 this 对观察到的元素的引用将被覆盖。如果您有以下标记:

<div id="foo">
    I am the Foo
    <button id="bar">I am the Bar</button>
</div>

在不使用 .bind 的情况下，您可以像这样访问被观察和触发的元素:

function greenEggsAndHam (evt) {
    console.log('Observed Element: %o', this);
    console.log('Clicked Element: %o', $(evt.element()));
}
Event.observe('foo', 'click', greenEggsAndHam);

但是，如果您想使用类方法作为事件处理程序，因此需要使用 .bind，那么解决方案是将观察到的元素的标识符作为参数之一包含在第一次绑定(bind)事件时的事件处理程序，如下所示:

var Test = Class.create({
    initialize: function() {
        Event.observe('foo', 'click', this.greenEggsAndHam.bind(this, 'foo'));
    },
    greenEggsAndHam: function (el, evt) {
        console.log('Observed Element: %o', $(el));
        console.log('Clicked Element: %o', $(evt.element()));
        console.log('Class reference: %o', this);
    }
});
var T = new Test();

也就是说，为了保持一致性，我建议您使用 .bindAsEventListener 而不是 .bind，并将您的事件处理程序更改为 function (evt, el) { 这样事件对象就是第一个参数，观察到的元素就是第二个参数。