".on('click hover')"或".on('click')"和".on('hover')"有什么区别？

Question

".on('click hover')"或".on('click')"和".on('hover')"有什么区别？

3

最近我学到了在JQuery的.on()方法中添加多个事件可以像这样调用同一个函数：

var elmt = $('#myElmt');

elmt.on('click hover', myCallbackFunction);

在我将它们分开之前，是这样的：

var elmt = $('#myElmt');

elmt.on('click', myCallbackFunction);
elmt.on('hover', myCallbackFunction);

你是否曾经遇到过这样的情况：在两种技术之间存在差异（例如：限制代码演进的约束、性能差异等）？

还是两者完全相同，只有开发人员的喜好才会影响选择？

- johannchopin

4

有什么区别？jQuery可以为您完成，或者您自己完成。jQuery只是执行了分割和循环，并附加事件。性能上不会有太大的差异...随你喜欢做哪一种。 - epascarello

jQuery只是将函数附加到两个事件上，因此无论使用哪种方法，性能都是相同的。 - anees

1

只需使用.on('click hover'，然后自豪地结束它。（根本没有必要谈论性能。） - Roko C. Buljan

@RokoC.Buljan 不仅关乎性能，还关乎代码质量和持久性。 - johannchopin

@johannchopin 这是个人对什么更好的看法。 - epascarello

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- igg · Accepted Answer

就性能而言，它基本上是相同的。jQuery调用的本地javascript方法是addEventListener，它只接受一个事件作为参数。无论jQuery是否喜欢，添加多个事件侦听器都需要为每个侦听器调用addEventListener。请自行查看：

创建一个名为index.html的新文件，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  </head>
  <body>
    <div id="cart">cart</div>
    <script>
        $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
          $( this ).toggleClass( "active" );
        });
    </script>
  </body>
</html>

使用浏览器打开它。打开浏览器开发者工具（以下示例是Chrome），找到jquery.js文件并在第5039行设置断点：

重新加载页面并观察调试器。

它会恰好两次进入断点，一次是您要监听的每个事件。如果您像这样更改脚本标记：

$( "#cart" ).on( "mouseenter mouseleave click focus blur", function( event ) {
    $( this ).toggleClass( "active" );
});

现在，它将按预期5次通过断点。

基本上，这段jQuery代码：

$('#cart').on("mouseenter mouseleave", myCallback);

等同于

$('#cart').on("mouseenter", myCallback);
$('#cart').on("mouseleave", myCallback);

等同于：

document.getElementById('cart').addEventListener("mouseenter", myCallback);
document.getElementById('cart').addEventListener("mouseleave", myCallback);

结论：使用你认为美观的任何东西。