jQuery: привязка одного прослушивателя событий, который может обрабатывать события своих потомков

Question

Я столкнулся с вопросом, решение которого я не знал.

Предположим, у меня есть HTML-разметка (динамически генерируемая сервером или просто статический файл):

<ul class="myList">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<!-- ... -->
<li><a href="page1000.html">Page 1000</a></li>
</ul>

Я хочу привязать обработчик события щелчка к тегу . Обычно я бы выписал

$('.myList').find('a').click(function() {});  /* Or something similar */

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

Меня спросили, есть ли какой-нибудь способ присоединить только один прослушиватель событий (к тегу ul) и использовать всплывающее окно событий, чтобы выяснить, какой тег привязки был нажат. Я никогда не сталкивался с чем-то подобным, поэтому я не знал ответа. Видимо, есть ответ. Кто-нибудь знает, как разместить один элемент прослушивания событий на элементе и выяснить, какой дочерний элемент был нажат? (Мне все еще нужно использовать event.preventDefault () для предотвращения события щелчка по умолчанию.)

Answer 1

Проверьте delegate() - это именно то, что вы просите.

$('ul.mylist').delegate('a', 'click', function() {
  // ... your code ...
});

Вы получаете все преимущества обработчика jQuery, не связываясь свсе эти элементы.

Answer 2

Вы можете получить доступ к event.target, который будет элементом, который запустил событие.

$('.myList').click(function(event) {
   var target = $(event.target);
});

jsFiddle .

Однако, Ответ Пойнти , кажется, проще в использовании.

Answer 3

Если вы используете версию jQuery> = 1.7, метод .on() заменяет .delegate(). В jQuery 2.x и 1.11 .delegate() просто звонит .on():

delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
}

Чтобы использовать его в этом случае:

$(".myList li a").on("click", function(e) {
  //Code here, and you can use e.preventDefault(); to avoid the default event.
});

Answer 4

Функция, которую вы прикрепите, будет иметь параметр события, который содержит объект, по которому щелкают в event.target.

 $(.....).click(function(event){  ....  });

Другое решение, более сложное, но и более гибкое, хотя в этой ситуации оно вам не понадобится, - это использование метода .bind и указание объекта данных

$(.....).bind('click', {whateverproperty: whatevervalue}, function(event){ ... });

В этом случае вы можете достичь event.data.whateverproperty, получая, таким образом, значение whatevervalue, что позволяет принимать более сложные решения.