如何从处理程序内部获取事件处理程序附加到的元素？

Question

通常，将事件处理程序附加到元素时，您可以使用传递到处理程序函数的第一个参数的 .target 成员来访问该元素，如下所示：

button.on('click', function(e) {
  alert(e.target);
});

这将返回按钮元素。

我想要理解的问题是，当您在带有事件处理程序的元素内部有一个元素时，事件的目标是内部元素，而不是附加了处理程序的元素。当我的事件处理程序需要访问附加到外部元素的数据时，这是一个问题。

<div class="outer" data-tag="i-need-this-data">
  <b>Click Me</b>
</div>

使用此标记，将事件附加到

.outer

并单击

Click Me

将导致 event.target 成为

<b>

而不是

<div>

。这是有问题的，因为我必须使用解决方法，例如检查外部类，向上爬 DOM 直到看到

.outer

，然后以这种方式访问数据。此行为的示例可以在此 JSFiddle 中看到：https://jsfiddle.net/qce23qhw/

JSFiddle 中的第一个示例显示了不良行为，单击内部方块会导致 event.target 成为内部方块。第二个示例显示了我的解决方法的实现。

是否有一种更清晰的方法来从处理程序内部获取处理程序附加到的元素而不是单击的元素？

Answer 1

只需使用您已在循环中使用的元素即可。

this

也设置为当前元素：

$$('.two').each(function(element) {
    element.on('click', function(e) {
        alert(this.dataset.tag);
    });
});

Answer 2

这是烘焙到

on

方法中的。它在回调中采用第二个属性，即响应事件的对象：

document.on(‘click’, ‘.foo’, function(evt, elm){
  console.log(elm.inspect()); // -> elm is the element.foo that was clicked
});

如果您正在使用：

$(‘some_id’).observe(‘click’, function(evt){
  console.log(this.inspect()); // -> this is the element#some_id that was clicked
});

使用

on

几乎总是更好，因为它允许您从 DOM 中删除正在观察的元素，替换它，并且仍然可以观察它而无需重新实例化观察者。

Answer 3

批准的答案对我不起作用。

this

关键字在我的处理程序中似乎未定义。

相反，我发现

event.currentTarget

是一种更可靠的方法来获取带有附加处理程序的元素。