jQuery和ES6箭头函数

Question

在jQuery中，我们习惯于绑定像这样的点击处理程序：

$(".all-buttons").click(function() {
    var btn = this;
    console.log(btn.innerHTML);
});

我希望能够使用与ES6箭头功能相同的功能，如下所示：

$(".all-buttons").click(btn => console.log(btn.innerHTML));

问题是jQuery没有像其他原生javascript函数那样将当前元素作为参数传递，例如Array.forEach()

另一个问题是箭头函数无法“应用”，即调用fn.apply(this, args)，这是jQuery依赖于让我知道哪个元素触发了事件。

我只是在这里放了“click”示例，但我希望能够将它应用于任何jQuery回调。

有人对如何实现这一点有任何建议吗？也许使用一个不同的库，它以元素作为参数调用我的回调？或者也许是一个jquery插件？或者我不知道的javascript技巧？

我很感激帮助。

Answer 1

基本功能很简单：处理程序接收的Event对象具有currentTarget属性，与this相同：

$(".all-buttons").click(e => console.log(e.currentTarget.innerHTML));

请注意，这与e.target：

不同

• target是事件的目标元素，而
• currentTarget是事件在路由到该处理程序挂钩的目标的过程中传递的元素

例如，如果你有

<div>
    <span>click me</span>
</div>

...你有一个与div挂钩的处理程序，点击span会给你e.target = span，e.currentTarget = div。

关于＆＃34;其他图书馆，＆＃34;对于SO来说，图书馆建议是偏离主题的。但我会在现代浏览器中注意到：

• DOM自己的NodeList返回的querySelectorAll有forEach，这样可以轻松循环播放匹配（对任何内容进行polyfill也很容易）模糊的近期浏览器）
• DOM元素现在也有closest方法，这使得使用DOM的事件委派比以前简单得多（并且可以再次填充）。

Answer 2

好的，在jQuery传递的事件参数中进行了一些挖掘之后，我发现这是可用的：

$(".all-buttons").click(event => console.log(event.target.innerHTML));

其中event.target是单击的按钮。

我对事件冒泡知之甚少，以及jQuery作为this传递的元素是否始终与event.target相同。