Делегирование событий в javascript позволяет избежать добавления прослушивателей событий для определенных узлов; вместо этого слушатель события добавляется к одному из родителей.
Если внутри одного родителя много элементов, и вы хотите обрабатывать события в них, мы не хотим связывать обработчики с каждым элементом. Вместо этого мы связываем один обработчик с их родителями, что является хорошей практикой.
Когда вы создаете объект dom динамически и вам нужно прикрепить событие к объекту, который еще не существует, но будет.
Это легко понять с помощью следующего примера, ajax будет выполнен и добавит в наш документ div с классом «myDivision», мы хотим, чтобы каждый раз, когда пользователь нажимал на div myDivision, что-то происходило. Если вы объявите слушателя таким образом, когда документ будет готов:
$(".myDivision").click(function(){
//Binded event to our .myDivision objects
});Вы заметите, что когда будет выполнен вызов ajax и в наш документ добавлены div, ничего не произойдет при нажатии! Но почему ?
Проще говоря, когда выполняется функция щелчка, еще не существует объекта с классом myDivision, поэтому слушатель не будет связан.
Вы создадите скрытый div с этим классом, и слушатель будет привязан, но когда вызов ajax будет выполнен снова и в DOM будет добавлено больше элементов div myDivision, он также не будет работать!
Поэтому нам нужно обработать делегирование событий, чтобы не добавлять прослушиватель щелчков для каждого объекта .myDivision, который мы динамически добавляем в документ следующим образом:
$(document).on("click",".myDivision", function(){
//Execute something
});Делегирование события очень легко понять, слушатель добавляется в родительский контейнер наших объектов, и он будет управлять слушателями всех дочерних целевых элементов.
