Скажем, у меня есть Grid/Table с огромным количеством данных, таких как 1000 строк и обработчиков событий для каждой из строк...
Теперь есть два способа реализовать одно и то же;
1.
$( "#dataTable tbody tr" ).on( "click", function() {}
и 2.
$( "#dataTable tbody" ).on( "click", "tr", function() {}
Не могли бы вы объяснить основную разницу между 2 подходами и тем, как это может помочь в рендеринге/производительности....
Делегирование (метод 2) должно использоваться, когда элементы, которые соответствуют селектору, изменяются динамически. Вы должны использовать это только при необходимости для этой цели. Он устанавливает обработчик на элемент в селекторе, что .on
применяется к, а затем должен проверить, соответствует ли целевой элемент селектор в списке аргументов; это зависит от того, что событие перетекает из внутреннего элемента в элемент, к которому вы привязываетесь. Это менее эффективно, чем привязка непосредственно к целевому элементу, поскольку браузер полностью реализует это.
Первая форма должна использоваться, когда элементы статичны. Селектор соответствует всем им, когда DOM готов, и привязывает обработчики к каждому из них.
Прочтите .on()
Поскольку новые элементы, добавленные javascript, не являются частью DOM при готовности DOM или загрузке страницы, поэтому вам необходимо использовать Event Delegation
Это мероприятие
$("#dataTable tbody").on( "click", "tr", function() {
объяснение выше кода
Мы прикрепляем обработчик событий к элементу с идентификатором dataTable
, содержащей tbody
тега, так что если больше tr
добавляется dynamically
, чем click
случае будет работать на новом добавленном tr
.
Но если для использования ниже кода, чем новый добавленный tr
, к нему не будет прикреплен click event handler
.
Ниже код будет работать, если элементы присутствуют в DOM в DOM ready или Page Load.
$( "#dataTable tbody tr" ).on( "click", function() {}
равно
$( "#dataTable tbody tr" ).click(function() {});