Note: Using Chrome, works as expected in Safari. In summary, I thought I had a good knowledge of JavaScript. To test my skills, I decided to take a challenge and guess what happened:
We have an
<input type="button" id="btn">addEventListener('click', handler1, false);
addEventListener('click', handler2, true);
Inquiry: Which handler will be executed first?
My Assumption: It's simple, handler2 is set to run in the capturing phase, so it should execute first.
Reality: Execution order - handler1 followed by handler2.
It appears that for the node triggering the event, the sequence is bubbling before capturing phase starts.
In simpler terms, the capturing phase concludes AFTER the bubbling phase commences.
This contradicts the typical visualization we have when discussing capturing and bubbling: https://i.sstatic.net/OhcYz.jpg
Instead, the actual scenario seems more like this:
https://i.sstatic.net/Gilvx.jpg
Is there any insight or explanation on this from anyone?
Snippet:
const input = document.querySelector('#btn');
function handler1(e){alert("Hi from handler1, phase: Bubbling")};
function handler2(e){alert("Hi from handler2, phase: Capturing")};
input.addEventListener('click', handler1, false);
input.addEventListener('click', handler2, true);<input type="button" id="btn" value="I'm clickable button"/>