JQuery «* на клик функции *»

Question

Я борюсь с этим кодом:

После выбора элемента HTML, а затем применяя на функции мыши что цель tr.

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
}); 

Answer 1

Цель TR заключается в определении того, что вы будете щелкая в селекторе #dataTable tbody. Попробуйте изменить его на что-то еще и посмотреть, как он ведет себя по-другому.

Answer 2

Там тонкое различие между:

$("#dataTable tbody tr").on("click", callback); // 1 

и

$("#dataTable tbody").on("click", "tr", callback); // 2 

Первый выбирает каждый tr и вызывает addEventListener по каждому в отдельности.

Второй добавляет только один, специальный прослушиватель событий к элементу tbody. Всякий раз, когда что-то внутри кликается, этот прослушиватель проверяет, является ли он tr, а затем делегирует событие указанному обратному вызову.

Это дает 2 практические различия:

• Один слушатель добавляется, вместо того, чтобы потенциально очень много (что может повысить производительность в некоторых случаях),
• если добавить еще tr s динамически в будущем, они также будут реагировать на click, как и следовало ожидать.

Answer 3

События bubble. Это главное, что вам нужно понять. Если пользователь нажимает на a Внутри p Внутри td внутри tr внутри table (и так далее), событие щелчка будет пузыриться каждый из этих элементов и вызвать все click слушателей событий, в свою очередь.

$("#dataTable tbody").on("click", "tr", function() { 

Это выбирает #dataTable tbody элемент для прикрепления слушателя событий, но он будет фильтровать и реагировать только на события, вызванные вложенной tr. Вы также можете сделать это вместо:

$("#dataTable tbody tr").on("click", function() { 

Но это было бы связать много слушателей отдельного события для каждого tr. Это может быть намного более неэффективным или иметь другие нежелательные эффекты; например, если вы продолжаете добавлять или удалять элементы tr, вы можете столкнуться с некоторыми tr s, которые имеют прослушиватели событий, привязанные к ним и другим без.