В чем разница между .on («щелчок при наведении») или .on («щелчок») и .on («при ​​наведении»)? - PullRequest
Новая
       8

В чем разница между .on («щелчок при наведении») или .on («щелчок») и .on («при ​​наведении»)?

3 голосов
/ 27 января 2020

Недавно я узнал, что вы можете добавить несколько событий в метод .on() для JQuery, чтобы вызывать одну и ту же функцию следующим образом: 

var elmt = $('#myElmt');

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

Прежде чем разделить их следующим образом: 

var elmt = $('#myElmt');

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

Есть или вы когда-нибудь попадали в случай, когда есть разница между этими двумя (например, ограничения для развития кода, различия в производительности и т. Д. c)?

Или это точно так же и только вкус разработчика может повлиять на выбор?

1 Ответ

7 голосов
/ 27 января 2020

С точки зрения производительности , это почти то же самое. Нативный javascript метод, который jQuery вызывает, 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>
Откройте его с помощью браузера. Go для инструментов разработчика вашего браузера (пример ниже для Chrome), найдите файл jquery.js и поместите точку останова в строку 5039:

enter image description here

Перезагрузите страницу и посмотрите отладчик.

Она будет go до точки останова ровно дважды, один раз для каждого события, которое вы хотите прослушать. Если вы измените тег сценария следующим образом: 

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

Вывод: Используйте все, что вам эстетически нравится.

...