jQuery和ES6箭头函数

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

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

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

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

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

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

问题在于jQuery不像其他本机javascript函数那样将当前元素作为参数传递，例如

Array.forEach（）

另一个问题是不能“应用”箭头函数，即调用类似

fn.apply（this，args）

，这是jQuery用来让我知道触发事件的元素的依据

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

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

---

感谢您的帮助。

基本功能很简单：处理程序接收的

事件

对象有一个

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

关于“其他图书馆”，图书馆的建议与SO无关。但我会注意到，在现代浏览器上：

• DOM自己的

  querySelectorAll

  返回的

  NodeList

  具有

  forEach

  ，这使得循环匹配变得很容易（在任何模糊的最新浏览器上进行多边形填充也很简单）
• DOM元素现在还有一个

  最接近的
  方法，这使得DOM的事件委派比以前简单得多（而且可以是多填充的）

---

好的，在深入研究jQuery传递的事件参数之后，我发现这是可用的：

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

其中event.target是单击的按钮

---

我不太了解事件冒泡以及jQuery作为

传递的元素this

是否始终与

event.target

相同。

事件处理程序将

事件

作为其参数。这包括元素。您希望

apply

的外观如何？为什么不使用function关键字？

target

不是正确的属性，它通常与jQuery回调中的

this

不同。有关详细信息，请参阅我的答案。谢谢，我在发布问题后不久就发现了这一点，不过你的答案更好。这是否有效$（“.all buttons”）。单击（（）=>console.log（this.innerHTML））@T.J。Crowder@PunithJain：仅当您需要

的
内部HTML
时，此

就是该代码出现的位置（不是单击的元素，因为箭头函数关闭

此

，而不是自己的）。Logan关于DupiTarget的观点可能是正确的。我在想这个问题的其他方面使它成为自己的事情，但是。。。