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>。这是有问题的，因为我必须使用诸如检查外部类的工作区，在我看到.outer之前爬上DOM，然后以这种方式访问数据。在这个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中删除您正在观察的元素，替换它，并且仍然可以观察它而无需重新实例化观察者。

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

2 个答案: