Question

我有一个带有一些事件的JS类

jQuery(document).on('click', '.btn-details', (e) => {

但我无法访问.btn-details所拥有的数据。

当我做

时

jQuery(document).on('click', '.btn-details', function() {

我可以访问btn-details - 元素的data-attr，但不能访问this.myvar - 类变量。

这里有什么问题？这个(e) =>究竟意味着什么？

Answer 1

它们都是函数调用。区别在于，在第一次调用中，您使用带有事件参数（e）的arrow function。

箭头功能

(param1, param2, …, paramN) => { statements }

如文件中所述

箭头函数不会创建它拥有此上下文，而是捕获封闭上下文的此值

因此，我假设您尝试使用this关键字

获取数据属性

$(this).attr('data-test')

但是，在箭头函数中，this指的是封闭上下文的对象，而不是指特定对象。

第二个是经典函数调用，this是指点击元素，因此您可以成功获得数据测试＆＃39;属性。

示例

选中此live example

在两个按钮中，此对象都在console.log中写入。使用正常功能，控制台输出单击元素（按钮），但使用箭头功能控制台输出窗口对象。

Answer 2

警告虽然它们是定义功能的两种方式，但它们不相同。详细了解MDN Documentation。

箭头功能会自动将this绑定到当前上下文如果您使用jQuery，如果您尝试使用this来引用当前目标，则会出现此问题。

$('div').click(function() {
  console.log(this) // the click target as expected
})

$('div').click(() => {
  console.log(this) // not the click target because jQuery can't bind it
})

如果您想使用箭头功能，您可以接受该事件作为回调的参数：

$('div').click((e) => {
  console.log(e.currentTarget) // click target as expected
  console.log(this) // enclosing context - could be useful
}

如果你想在回调中跟踪封闭的上下文，这实际上很方便。

Answer 3

使用箭头（）=＆gt;功能绑定＆＃34;这个＆＃34;来自原始来电者的关键字＆＃34;此＆＃34;到功能范围内的一个。

Answer 4

访问相关元素的最安全的方法（我的意思是没有弄乱this上下文）是使用适当的事件属性。

e.target指的是实际的事件目标
e.currentTarget指的是委派的事件目标（与this相同）

因此，在您的情况下，您始终可以使用.btn-details访问e.currentTarget元素。

Answer 5

e包含click个事件属性。它通常用于类似全局（document范围）的事件，如下所示：

jQuery(document).on('click', '.btn-details', (e) => {
   var btnDetails = e.target;
   var attr = btnDetails.data("attr");
}

或

jQuery(document).on('click', '.btn-details', function(e) {
   var btnDetails = e.target;
   var attr = btnDetails.data("attr");
}

原始事件接收器是document元素，因为您已将侦听器方法绑定到它，但您可以通过查询其中的e.target来获取触发元素。

jQuery - 这些函数调用之间的区别

5 个答案: