Разница между `$ (document) .on (" click "," a "и` $ ("a"). Click (`

Question

Может ли кто-нибудь сказать мне, в чем разница между этими двумя сценариями? JavaScript/JQuery эксперт.

$(document).on("click", "a", function() { 
    i = $(this).data("value"); 
    alert(i) 
}) 

$("a").click(function() { 
    i = $(this).data("value"); 
    alert(i) 
}); 

Answer 1

$(document).on("click", "a", function() { будет связывать событие на a элементы, которые не присутствуют в момент связывания события. Это называется event delegation.

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

Принимая во внимание, что $("a").click(function() { свяжет события только с a элементами, которые присутствуют в DOM.

Answer 2

Первый дает event delegation, т. Е. Связывает событие с элементом, существующим в DOM, и выполняет критерии выбора + любой элемент, добавленный в DOM после привязки события (соответствие критериям выбора), будет автоматически привязан, поскольку он добавляется в DOM на лету.

Хотя позднее свяжет событие с существующими элементами.

Delegated events

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

Answer 3

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

Второй будет выполнять код только для элементов «a», которые уже имеются на странице .