jQuery 和 ES6 箭头函数 [重复]

Posted 2023-05-07

【中文标题】jQuery 和 ES6 箭头函数 [重复]

【英文标题】：jQuery and ES6 arrow functions [duplicate]

【发布时间】：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 技巧？

感谢您的帮助。

【问题讨论】：

事件处理程序将Event 作为参数。这包括元素。

您希望apply 看起来如何？

为什么不用function关键字？

【参考方案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。

关于“其他库”，库推荐与 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 相同。

【讨论】：

target 不是正确的属性，它经常与 jQuery 回调中的 this 不同。详情见我的回答。