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= the span,e.currentTarget= the div.

关于"其他图书馆",图书馆建议对于SO来说是偏离主题的.但我会注意到在现代浏览器上:

• 该NodeList由DOM自己返回querySelectorAll了forEach,它可以很容易地遍历匹配(这也是微不足道的填充工具上的任何含糊,最近的浏览器)
• DOM元素现在也有一个closest方法,它使得使用DOM的事件委派比以前简单得多(并且可以再次填充).