最好使用.on（'click hover'）或.on（'click'）和.on（'hover'）

Question

我最近了解到，您可以将多个事件添加到.on()的JQuery方法中，以调用相同的函数，如下所示：

var elmt = $('#myElmt');

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

在我像这样将它们分开之前：

var elmt = $('#myElmt');

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

[您是否曾经在两者之间存在差异（例如使代码发展的约束，性能差异等）之间倒下？

或者是完全一样，只有显影剂的味道会影响选择吗？

Answer 1

就性能而言，几乎是相同的。 jQuery调用的本机javascript方法是addEventListener，它仅接受1个事件作为参数。不管jQuery是否喜欢，添加许多事件侦听器都需要为每个侦听器调用一次addEventListener。自己看看：

index.html

使用浏览器打开。转到浏览器开发人员工具（以下示例适用于Chrome），找到<!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>文件，并将断点放在第5039行：

jquery.js

它将准确地转到断点两次，对于您要听的每个事件一次。如果您像这样更改脚本标签：

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

本质上，此jQuery代码：

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

相当于

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

等效于：

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

结论：使用美观的东西。

Answer 2

-1
投票

您可以使用onmouseover，onmouseleave事件