jQuery 和 ES6 箭头函数 [重复]答案

【问题标题】：jQuery and ES6 arrow functions [duplicate]jQuery 和 ES6 箭头函数 [重复]
【发布时间】：2018-08-02 16:22:00
【问题描述】：

在 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 依赖于让我知道哪个元素触发了事件。

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

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

感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

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

注意这与e.target不同：

例如，如果你有

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

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

关于“其他库”，库推荐与 SO 无关。但我会注意到，在现代浏览器上：

由 DOM 自己的 querySelectorAll 返回的 NodeList 具有 forEach，这使得循环匹配变得容易（在任何最近的浏览器上进行 polyfill 也是微不足道的）
DOM 元素现在也有一个closest 方法，这使得使用 DOM 的事件委托比以前简单得多（而且可以再次填充）。

【讨论】：

谢谢，我在发布问题后不久就发现了这一点，不过你的答案更好。
这会起作用 $(".all-buttons").click(() => console.log(this.innerHTML)); @T.J。克劳德
@PunithJain：只有当你想要 innerHTML 的任何 this 是代码出现的地方（不是被点击的元素，因为箭头功能关闭 @987654341 @ 而不是自己的）。
Logan 关于欺骗目标的说法可能是正确的。我在想这个问题的其他方面使它成为自己的事情，但是......

【解决方案2】：

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

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

其中 event.target 是被点击的按钮。

我不太了解事件冒泡以及 jQuery 传递为 this 的元素是否始终与 event.target 相同。

【讨论】：