How does event bubbling work on event handling?

Question

I have defined this event handler:

document.addEventListener("load", function(){
  alert("Called on page load");
}, false);

I noticed it does not get called when the boolean flag is set to false(fire at bubble phase). Could someone help me out on why this is the case.

Answer 1

When an event is being sent to an element, it descends the document tree in the capture phase until it reaches the target. Then, if it's a bubbling event , it bubbles back up.

From 2.1 Introduction to “DOM Events” in the DOM standard :

When an event is dispatched to an object that participates in a tree (eg an element), it can reach event listeners on that object's ancestors too. First all object's ancestor event listeners whose capture variable is set to true are invoked, in tree order. Second, object's own event listeners are invoked. And finally, and only if event's bubbles attribute value is true, object's ancestor event listeners are invoked again, but now in reverse tree order.

load isn't a bubbling event, and – here's the important part – it doesn't target document . When you add a capture listener, you're really getting load events from parts of the document's content that normally receive the event, like scripts or images. On a page with only the script, you won't see the listener get called at all:

 <iframe srcdoc="<script>document.addEventListener('load', () => { alert('loaded'); }, true);</script>"></iframe> 

And on a page with load events that fire after the listener is attached, like this Stack Snippet that includes <style> s, you'll see it more than once:

 let i = 0; document.addEventListener('load', e => { console.log(`loaded ${++i}: ${e.target.nodeName}`); }, true); 

You probably meant to add a non-capturing listener to window instead of document , because window is something that receives a load event, unlike document . (Or you might have meant something else. There's a lot of ways to interpret “page load”. See Window: load event on MDN for details on what the load event means on window and alternatives if it wasn't what you intended.)

window.addEventListener("load", function() {
    alert("Called on page load");
}, false);