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

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

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

Ответы

Ответ 1

События

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

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

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

ИЗМЕНИТЬ

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.

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

Ответ 2

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

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