Делегирование событий при наведении на мышь

Question

При создании событий щелчка я стараюсь привязывать их только один раз - обычно к родительскому объекту, совместно используемому всеми узлами, которые должны запускать событие. Мне любопытно, однако, что наилучшая практика в событиях mouseover: имеет ли смысл связывать событие с родителем, когда результатом будет постоянная стрельба события при наведении мыши? Какова самая эффективная практика?

Answer 1

Для того, чтобы обеспечить некоторое закрытие на этот вопрос, я собираюсь перефразировать/цитату некоторые соответствующие заметок из этого ответа: «Should all jquery events be bound to $(document)?», который ссылается выше, @Faust:

Делегирование событий не всегда делает ваш код быстрее. Если вы не привязываетесь к динамическим элементам или тонне элементов, вы должны привязать обработчики событий непосредственно к объектам, где происходит событие, поскольку это, как правило, будет более эффективным.

Более конкретно, здесь раз, когда событие делегации требуется или преимущественный:

• Когда объекты вы захватывая события на динамически создаются/удаляются, и вы все еще хотите, чтобы фиксировать события на них без явного переделывать обработчики событий каждый раз, когда вы создаете новый.
• Когда у вас есть много объектов, для которых все хотят одного и того же обработчика событий (где лоты по меньшей мере сотни). В этом случае во время установки может быть более эффективным связывать один делегированный обработчик событий, а не сотни или более прямых обработчиков событий. Обратите внимание, что делегированная обработка событий всегда менее эффективна во время выполнения, чем обработчики прямых событий.
• Когда вы пытаетесь захватить (на более высоком уровне в документе) события, которые происходят на любом элементе документа.
• Когда ваш проект явно использует событие bubbling и stopPropagation(), чтобы решить некоторые проблемы или функции на вашей странице.

Оригинальный ответ на @ jfriend00

Answer 2

вы также можете прекратить распространение событий. Более подробная информация здесь: http://api.jquery.com/event.stoppropagation/ и здесь event.preventDefault() vs. return false

Answer 3

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

С динамическими элементами вы можете установить прослушиватель mousemove в родительском div/container, а затем запросить в div для элементов с атрибутом: hover.

Например:

<div class="list-container"> 
    <ul class="dynamic-list-content"> 
    <!-- actual list elements provided by js --> 
    </ul> 
</div> 

Тогда:

var listContainer = document.querySelector('.list-container'); 
listContainer.addEventListener('mousemove', function(e) { 
    var hovered = listContainer.querySelector('li:hover'); 
    // do something with the hovered element here. 
}); 

Обратите внимание, что (как вы упомянули) это не будет стрелять много, но не больше, чем если бы вы добавили MouseMove слушателя событий для человека записей. И вы можете немного отбросить это, используя атрибуты данных, уникальные идентификаторы и т. Д. Из моих тестов, однако, это довольно эффективно в Chrome.