I was going through this article about Javascript Eventing where the author beautifully explained about three phases of eventing(capturing, target, bubbling) and how events originate and how they travel in the DOM. According to it, the event first travels in the capture phase, then target phase and in end, it goes through bubbling phase.Hence,if there are two listeners attached on the same element for the same event, one at capturing phase and another at bubbling phase, then the event listener attached at capturing phase will be called first followed by event listener attached at bubbling phase.

I tried the above process for click event and message event. The click event is following the above behaviour but message event is not. Please find the code snippets for both cases:

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);

Message Event Case

Click Event Case

Why message event is behaving differently and not like other normal events?