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

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

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

10
event-propagation events javascript jquery

2 ответов

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

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

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

редактировать

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

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

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

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

16

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

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

1