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

通常附接的事件处理程序的元素时，则可以使用传递到处理函数，像这样的第一个参数的.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成为内部正方形。第二个示例显示了我的解决方法的实现。

是否有一种更简洁的方式从处理程序内部获取处理程序所连接的元素，而不是单击的元素？

来源

2016-08-11 Stephen Smith

只需使用循环中已使用的元素即可。 this也被设置为当前元素：

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

来源

2016-08-11 20:23:03 FrankerZ

我应该补充一点，我的目标是重用处理函数，因此它看起来像'element.on（'click'，handleClick）'，因此元素在'handleClick'内是未定义的。 –

@StephenSmith更新了我的回答 – FrankerZ

太棒了，我不能相信我忘记了这个。谢谢！ –

这被烘焙到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中删除你正在观察的元素，替换它，并且仍然观察它，而不用重新实例化观察者。

来源

2016-08-12 00:46:21 Walter

这似乎并没有解决我的问题，我想要附加处理程序的元素，而不是与之交互的特定元素。即当事件附加到'.outer'时，单击'.inner'会导致'elm'被设置为'.inner'，而不是'.outer'。 –

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

回答

相关问题