gpt4 book ai didi

javascript - .on ('click hover' ) 或 .on ('click' ) 和 .on ('hover' ) 有什么区别?

转载 作者:行者123 更新时间:2023-12-01 00:50:55 26 4
gpt4 key购买 nike

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

var elmt = $('#myElmt');

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

在我像这样分开它们之前:

var elmt = $('#myElmt');

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

您是否曾经遇到过两者之间存在差异的情况(例如,使代码发展的限制、性能差异等)?

还是完全一样,只有开发者的品味才能影响选择?

最佳答案

性能而言,两者几乎相同。 jQuery 调用的原生 javascript 方法是 addEventListener ,它只接受 1 个事件作为参数。无论 jQuery 是否喜欢,添加许多事件监听器都需要为每个监听器调用一次 addEventListener 。亲自看看:

  1. 创建一个名为 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 行放置一个断点:
  • enter image description here

  • 重新加载页面并观察调试器。
  • 它将恰好转到断点两次,对于每个您想要监听的事件一次。如果您像这样更改脚本标记:

    $( "#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);

    结论:使用任何让你审美愉悦的东西。

    关于javascript - .on ('click hover' ) 或 .on ('click' ) 和 .on ('hover' ) 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59933764/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com