Estaba revisando este artículo sobre Javascript Eventing, donde el autor explicó bellamente las tres fases de la creación de eventos (captura, destino, burbujeo) y cómo se originan los eventos y cómo viajan en el DOM. Según esto, el evento viaja primero en la fase de captura, luego en la fase de destino y, al final, pasa por la fase de burbujeo. Por lo tanto, si hay dos oyentes conectados en el mismo elemento para el mismo evento, uno en la fase de captura y otro en fase de burbujeo, luego se llamará primero al detector de eventos adjunto en la fase de captura, seguido por el detector de eventos adjunto en la fase de burbujeo.

Probé el proceso anterior para el evento de clic y el evento de mensaje. El evento de clic sigue el comportamiento anterior, pero el evento de mensaje no. Encuentre los fragmentos de código para ambos casos:

 window.addEventListener("message", function(e) {console.log("FALSE MESSAGE");}, false); window.addEventListener("message", function(e) {console.log("TRUE MESSAGE");}, true); window.addEventListener("click", function(e) {console.log("FALSE CLICK MESSAGE");}, false); window.addEventListener("click", function(e) {console.log("TRUE CLICK MESSAGE");}, true);

Caso de evento de mensaje

Haga clic en Caso de evento

¿Por qué el evento de mensaje se comporta de manera diferente y no como otros eventos normales?