jQuery .on () с несколькими селекторами в делегировании событий?

Question

Я использовал .on() в jQuery 1.7 и задавался вопросом, можно ли одновременно прикреплять несколько селекторов для элементов, которые были вставлены на страницу. Ранее я использовал live() - но очевидно, что я хочу переместить данные улучшения производительности.

Можете ли вы использовать .on() таким образом, как:

$(document).on('click', '#selector1, #selector2, .class1', function () { 
     //stuff
});

И есть ли какие-либо преимущества, потерянные при прикреплении к документу?

Answer 1

1. Можете ли вы использовать .on () таким образом:

   $(document).on('click', '#selector1, #selector2, .class1', function () { 
       //stuff
   });
   

   Да, это будет работать.

2. Я хочу использовать это вместо live() с учетом улучшения производительности.

   В использовании фрагмента кода есть нет преимуществ в производительности по сравнению с live(), поскольку live() сам привязывает события к документу, а в jQuery 1.7 прямые вызовы on за сцены.

3. И есть ли какие-либо преимущества при добавлении к документу?

   Недостатком привязки к document является то, что событие должно пройти весь список предков, прежде чем оно будет обработано; , как указано в документации по jQuery , - самый медленный из возможных маршрутов. Лучше обработать событие раньше, прикрепив обработчик к элементу ближе к источнику события.

Answer 2

это возможно, и «это» - селектор, по которому щелкнули, а не документ.

Вам лучше присоединиться к ближайшему родительскому элементу вашего селектора. Когда вы нажимаете на «# selector1», всплывающее окно всплывает до элемента обработчика события, здесь: document.

Чем больше слоев, тем больше действий. Более того, если между селектором 1 и документом существует другой обработчик события щелчка, его можно перехватить с помощью event.stopPropagation();, и он никогда не достигнет обработчика события «документ».

вы можете проверить мошенническое событие "перехват" в этой скрипке .