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

Question

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

0

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

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

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

abiku 27 окт. 2013, в 12:45

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Steve Robinson · Accepted Answer · 2013-10-27T09-15-00.000Z

Если я добавлю некоторые новые элементы html через вызов Ajax на страницу, то скрипт будет искать каждый элемент Body для элемента.editButton и создает для него событие click?

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

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

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

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

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