Распространение событий в Javascript

Question

Если у меня есть элемент (html), вложенный в другой элемент, и к обоим элементам прикреплен обработчик щелчка, щелчок по внутреннему элементу выполняет его обработчик щелчка, а затем всплывает до родительского элемента и выполняет его обработчик щелчка. Вот как я это понимаю.

События всплывают в DOM-дереве, если к нему не присоединены одинаковые события, и если да, стоит ли ставить в конце каждого обработчика event.stopPropagation (), чтобы остановить это и ускорить процесс?

Answer 1

события почти всегда всплывают, если не установлено event.cancelBubble = true или используется event.stopPropagation (). Вы знаете только об этом, когда один из ваших событий обработчики отключаются.

См. http://en.wikipedia.org/wiki/DOM_events для списка событий, которые всплывают. (Примечание: в таблице событий HTML «отменяемый» относится к эффективности event.preventDefault () или возвращает «ложь», чтобы отменить действие по умолчанию, а не всплывать)

Также см. http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow,, в частности 1.2.1 Базовый поток, чтобы понять фазу захвата и пузырчатую фазу распространения события.

EDIT

http://mark -story.com / posts / view / speed-up-javascript-обработка событий-с-делегированием-событием-пузырьками подсказывает, что есть a увеличение производительности за счет остановки распространения, но не предоставляет никаких данных.

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046 предполагает, что браузеры должны быть оптимизированы для поведения пузырей, и говорит, что не должно быть существенной разницы в производительности Опять нет данных.

http://developer.yahoo.com/performance/rules.html#events предоставляет хороший метод для улучшения производительности обработки событий, но не говорит напрямую о производительности stopPropagation.

В конечном счете, вам придется профилировать разницу, чтобы получить представление о преимуществах на вашем сайте.

Answer 2

Я полагаю, что это поведение уже хорошо оптимизировано браузерами, поэтому вы не сможете ощутить значительное повышение производительности при остановке распространения (за исключением, возможно, действительно очень сложных вложенных структур DOM). Если вас беспокоит производительность и вы сталкиваетесь с большим количеством событий, вас может заинтересовать делегирование событий .

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