¿Por qué se puede ejecutar el evento transitionend cuando finaliza la transición de elementos del elemento?

Question

Adjunté un evento transitionend al div1. Cuando se completó la transición de div1, se ejecutó el evento. No hay problema.

me encontré con un caso especial:

añadí 3 párrafos a esta div1, cuando se puso fin a la transición de cada párrafo, transitionend caso div1 's también funcionó. Entonces, el evento transitionend se ejecutó 4 veces. >. <

En transitionend cuerpo de función de detector de eventos div1 's, puedo ver que event.target! == this. ¡Siento que es bastante ridículo!

Chrome y Firefox tienen este problema. Así que supongo que este no es un error de implementación de especificaciones HTML5 de un navegador.

¿Alguien puede explicar por qué el evento de un elemento transitionend también se puede desencadenar mediante el elemento secundario de este elemento?

Gracias.

Answer 1

Esto se denomina evento de burbujeo. Muchos eventos que ocurren en un elemento hijo, de forma predeterminada, irán surgiendo a través de los padres después de que se llame al controlador de eventos en el objeto de origen. Puede detectar el burbujeo como lo ha notado al examinar el objeto event o puede evitar el burbujeo al detener la propagación cuando maneja el evento en el objeto fuente.

Detener la propagación es una de esas cosas que es diferente en IE frente a otros navegadores. En otros navegadores, se llama:

event.stopPropagation() 

En IE antes de IE9:

window.event.cancelBubble = true;