JQuery На событие. Делегат и скорость вопрос

Question

Я использую в своем коде несколько событий, как:

$("body").on("click", '.editButton', clickFunction); 

И это создает события для каждого элемента внутри органа, который имеет класс .editButton. Я добавляю это событие в элемент Body, так как я не знаю, где я могу использовать эти кнопки в коде, иногда я делаю много запросов ajax для разных частей сайта, и я хочу, чтобы все они запускали clickFunction. Какое влияние оказывает этот метод на общую скорость страницы? Что делать, если у меня есть 5-6 таких событий делегата. Я не уверен, как это работает. Если я добавлю некоторые новые элементы html через вызов Ajax на страницу, то скрипт будет искать каждый элемент Body для элемента .editButton и создает для него событие click? И когда у меня будет мало таких событий, это будет сделано так несколько раз? Как быстро? Это то, о чем мы должны беспокоиться?

Answer 1

Если добавить некоторые новые элементы HTML через Ajax вызов страницы делает поиск скрипта каждый элемент тела для .editButton элемента и создает событие щелчка для него?

Ну, это не совсем так, как работает Event Delegation в JavaScript. Вы присоединяете обработчик событий только один раз к родительскому узлу. В вашем случае тег body.

Теперь, когда происходит какое-либо событие в любом месте на любом узле, событие распространяется на дерево DOM. (Event Bubbling). Как только он попадает в обработчик событий, целевая точка обработчика проверяется, и функция обратного вызова выполняется с ней.

В вашем случае, всякий раз, когда нажимается кнопка редактирования (или какая-либо кнопка), событие перемещается вверх до вашего тела, где у вас есть обработчик click. Он видит, что цель - .editButton, и JS знает, что это цель вашего обработчика.

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

Таким образом, добавление таких кнопок не приведет к увеличению производительности.