$ (element) .on (event) vs $ (ancestor) .on (event, element)

Question

Я использовал последнюю из ниже перечисленных функций с тех пор, как .on() был добавлен, но я недавно заметил, что довольно много ответов используют первое.

В чем разница между:

$(ancestor).on(event, element, function() { ... }) 

И:

$(element).on(event, function() { ... }) 

JSFiddle example.

Answer 1

Первый пример делегаты обработчик события выше дерева DOM. Это означает, что он может быть прикреплен к элементу (ancestor), который находится в DOM, но применяется к потомкам (element), которые еще не могут быть в DOM.

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

Делегация обладает дополнительным преимуществом эффективности. Представьте, что вы хотите привязать обработчик событий к каждому элементу li в большом списке. Гораздо эффективнее связать один обработчик с родительским ul, делегированный li элементам, чем привязать многие копии одной и той же функции.

Делегация работает, потому что большинство DOM событий пузырь вверх по дереву от элемента, на котором они происходят (целевой). После li примере, приведенном выше, рассмотрим следующий код:

$("#myList").on("click", "li", function() { /* Do stuff */ }); 

Когда потомок #myList, открывается click событие будет сгенерировано и будет пузыриться от этого элемента #myList (это небольшое упрощение - есть это еще одна фаза событий, называемых «захват», но это не важно здесь). Обработчик события, связанный с #myList, будет запущен, а jQuery проверяет, соответствует ли целевой элемент селектору. Если это так, он выполняет обработчик.

Answer 2

мне ваш первый один:

$(ancestor).on(event, element, function() { ... }) 

используется, когда некоторые элементы были загружены или созданы динамически. Прямое связывание событий с этими обычными работами, поэтому требуется делегирование событий его ближайшему родительскому элементу, которое было доступно во время загрузки страницы. $(document) является одним из тех, которые всегда доступны для делегирования события.

Ваш второй:

$(element).on(event, function() { ... }) 

Это прямое связывание события на элемент, но это будет работать на элементах, которые присутствовали во время загрузки страницы.