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

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

这已融入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 2

只需使用您已经在循环中使用的元素。 this 也设置为当前元素：

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