了解箭头功能 - 为什么这行不通而这行？

Question

我正在尝试将所有旧代码转换为使用箭头函数...

以下作品：

$p_worklist.mouseover (()=> {
   closemenues();
   console.log ("Show Worklist");
 $div_worklistmenu.show();
});

然而这并不

$p_worklist.mouseover =()=> {
   closemenues();
   console.log ("Show Worklist");
 $div_worklistmenu.show();
};

区别在于第一个函数用括号包裹主体，而第二个函数没有，而是用等号替换第一个括号并消除第二个。

正在努力学习... 谢谢

Answer 1

在你的第一个例子中你调用了 mouseover 方法，在下一个例子中你只是覆盖了那个方法而你没有调用它

Answer 2

第一个是调用$p_worklist.mouseover，并传入一个函数。 Jquery 然后将执行它需要执行的任何内部代码来设置事件侦听器，并且当发生鼠标悬停时，它将调用您提供的函数。

第二个是将分配给$p_worklist.mouseover，从而用您创建的函数覆盖原来的内容。没有其他代码运行，也没有设置事件监听器

Jquery 的 api 希望您调用它，因此选项 1 是正确的方法。

Answer 3

问题不在于箭头函数，而在于您使用 mouseover 属性来设置事件侦听器。

在 JQuery 中（考虑到您使用 $，我假设您正在使用），mouseover 是一个函数以另一个 function 作为参数。因此，您将完全按照您的方式传递匿名箭头函数。

然而，在原版 JavaScript 中，mouseover 属性是指向要作为事件侦听器调用的函数的指针。

如果您使用的是 JQ：

$('selector').mouseover(() => {
  // ...
});

如果您使用的是 JS：

element.mouseover = event => {
  // ...
}

当然，您可以使用 setter 自己覆盖 JQuery 方法，但这可能不是您想要的。

Answer 4

mouseover() 是一种 jQuery 方法。与所有 jQuery 事件处理方法一样，它以处理函数作为参数，因此您必须调用该方法。

当您分配给 $p_worklist.mouseover 时，您是用新函数替换该方法，而不是调用该方法。这不是您在 jQuery.

中绑定事件处理程序的方式

您混淆了 jQuery 方法调用与 DOM onXXX 属性，您在其中编写了类似

的内容

element.onmouseover = ()=> {
    closemenues();
    console.log ("Show Worklist");
    $div_worklistmenu.show();
};

Understanding arrow functions - why does this not work and this does?