Концепция делегирования
Если в одном родительском элементе много элементов и вы хотите обрабатывать на них события из них, не привязывайте обработчики к каждому элементу.обработчик подписи их родителю и получить дочерний элемент из event.target
Тогда, что такое делегирование событий JavaScript?
Делегирование событий - это простая техника, с помощью которой выприсоедините один приемник событий к родительскому элементу, который будет запускаться для всех дочерних элементов, соответствующих селектору, независимо от того, существуют ли эти дочерние элементы в настоящее время или добавляются в будущем.
При делегировании событий используются две часто пропускаемые функции JavaScriptсобытия: всплывающее событие и целевой элемент
Что такое всплывающее событие?
При всплытии события событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешнийelements
Что такое целевой элемент?
Целевым элементом любого события является исходный элемент, и это stored в свойстве объекта события.
Пример
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item 1</a></li>
<li><a href="/local/path/1">Item 2</a></li>
<li><a href="/local/path/2">Item 2</a></li>
<li><a href="http://domain4.com">Item3</a></li>
</ul>
</div>
Когда щелкается якорь в нашей группе #list, мы хотим записать его текст в консоль.Обычно мы могли напрямую связываться с событием click каждого якоря, используя метод .on ():
// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
Хотя это прекрасно работает, есть недостатки.Подумайте, что произойдет, когда мы добавим новый якорь после того, как уже привязали вышеупомянутого слушателя:
// add a new element on to our existing list
$( "#list" ).append( "<li><a href='#'>Item 5</a></li>" )
Если бы мы щелкнули по нашему вновь добавленному элементу, ничего бы не случилось.Это из-за напрямую связанного обработчика событий, который мы прикрепили ранее.Прямые события присоединяются только к элементам во время вызова метода .on ().В этом случае, поскольку наш новый якорь не существовал при вызове .on (), он не получает обработчик событий.
Поскольку мы знаем, как всплывают события, мы можем создать делегированное событие:
// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
Обратите внимание, как мы переместили деталь из селектора во второе положение параметра метода .on ().Этот второй параметр селектора указывает обработчику прослушивать указанное событие, а когда он его слышит, проверяет, соответствует ли инициирующий элемент для этого события второму параметру.В этом случае инициирующее событие - это наш тег привязки, который соответствует этому параметру.Поскольку это соответствует, наша анонимная функция будет выполняться.Теперь мы прикрепили к нашему прослушивателю событий одного клика, который будет прослушивать клики на его дочерних привязках, вместо того, чтобы прикреплять неизвестное число напрямую связанных событий только к существующим тегам привязки.
Что такоеПреимущества делегирования событий?
К странице прикрепляется только один прослушиватель событий, а не пятьсот динамически созданных элементов будут по-прежнему связаны с обработчиком событий.
Надеемся, это поможет вам визуальноконцепция делегирования событий и убедит вас в силе делегации!посетить: http://www.scriptcafe.in/2014/03/what-is-event-delegation-in-jquery.html