在原型中绑定事件处理程序并仍然保持对元素的引用

我希望能够在原型中使用绑定的事件处理程序并保留我的“this”上下文。但是这样做似乎破坏了原型给予事件处理程序的方便的默认绑定。在原型中绑定事件处理程序并仍然保持对元素的引用

从文档：

处理程序的情况下（此值）设置为被观察的展元件（即使实际发生的后代元素上的事件和冒泡）。

这正是我想要的。一旦我将函数绑定到自己的上下文中，是否可以以任何方式访问此“正在观察的元素”？我不能依赖于e.element（）给我所观察到的元素（可以是一个子元素）：

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

... 

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

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

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

来源

2009-11-11 Jason B

我最近也有这个问题。我的答案是将函数包装在另一个执行所需工作的函数中。我可能搞砸了订单，但curry将this添加到匿名函数的参数，然后您从那里重新排序。

initialize: function() { 
    Event.observe('foo', 'click', 
    function(e,that) { that.addItem(e,this); }.curry(this) 
    ); 
    }, 
addItem: function(evt, evtElm) { 
    ... 
    }

来源

2009-11-11 22:26:33

当您使用.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，那么当您第一次绑定事件时，解决方案是将观察元素的标识符作为事件处理函数的参数之一，如下所示：

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) {，以便事件对象是第一个参数，而观察的元素是第二个参数。

来源

2009-11-11 22:32:25

在原型中绑定事件处理程序并仍然保持对元素的引用

回答

相关问题