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

Question

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

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

这将 return 按钮元素。

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

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

使用此标记，将事件附加到 .outer 并单击 Click Me 将导致 event.target 成为 <b> 而不是 <div>。这是有问题的，因为我必须使用变通方法，例如检查外部 class、爬上 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 中删除您正在观察的元素，替换它，并且仍然观察它而无需重新实例化观察者。

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

How do I get the element that an event handler was attached to from inside the handler?

javascript

events

prototypejs