Propagación de eventos en Javascript

Question

Si tengo un elemento (html) anidado en otro elemento y ambos tienen un manejador de clics asociado, al hacer clic en el elemento interno ejecuta su manejador de clics y luego sube al padre y ejecuta su manejador de clics. Así es como lo entiendo.

¿Los eventos generan el árbol DOM si no hay eventos adjuntos que sean iguales y, de ser así, vale la pena poner event.stopPropagation() al final de cada controlador para detener esto y acelerar las cosas?

Answer 1

los eventos casi siempre aparecen a menos que se haya configurado event.cancelBubble = true o event.stopPropagation(). Sin embargo, solo lo sabe cuando se activa uno de los controladores de su evento .

Consulte http://en.wikipedia.org/wiki/DOM_events para obtener una lista de eventos que burbujean. (Nota: en la tabla de eventos HTML, cancelable se refiere a la efectividad de event.preventDefault() o return false para cancelar la acción predeterminada, no burbujeando)

Ver también http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow, en particular 1.2.1 Flujo básico para comprender la fase de captura y la fase de burbujeo de la propagación del evento.

EDITAR

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling sugiere que es una ganancia de rendimiento al detener la propagación, pero no proporciona datos.

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046 sugiere que los navegadores se deben optimizar para el comportamiento de burbujeo y dice que no debe haber una diferencia de rendimiento significativa. Nuevamente no hay datos.

http://developer.yahoo.com/performance/rules.html#events proporciona una buena técnica para mejorar el rendimiento de manejo de eventos, pero no habla directamente sobre el rendimiento de stopPropagation.

En última instancia, tendría que perfilar la diferencia para tener una buena idea de los beneficios en su sitio.

Answer 2

Supongo que este comportamiento ya está bien optimizado por los navegadores, por lo que no podrá obtener un impulso de rendimiento significativo al detener las propagaciones (excepto, tal vez, para las estructuras realmente complejas DOM anidadas). Si le preocupa el rendimiento y se ocupa de muchos eventos, puede interesarle la delegación de eventos .

Además, debe recordar que su código debe seguir siendo legible y explicable por sí mismo. stopPropagation() es un método utilizado para ciertos fines, por lo que su uso en todos los métodos podría ser realmente confuso.