Today I found out that custom events to do not bubble by default. This completely contradicted my intuition and expectation.
This is a follow-up question to that:
What was the rational, if known, behind this design choice?
The linked answers only references as a reason the fact bubbles defaults to false
, which isn’t what I am looking for here, as that is merely an implementation fact and does not really tell me why the default is as it is.
In the past, I also already wondered why audio- and video-events don’t bubble, so that is a related question, but the reasoning given there, in my opinion, does not apply here.
const customEventHandling = () => {
document.addEventListener('this-is-my-custom-event', (event) => {
console.log('THIS SHOULD PRINT ON DISPATCHED EVENT!');
});
document.onreadystatechange = () => {
if (document.readyState !== "complete") {
console.log('not ready yet');
return;
}
console.log('before dispatch');
const event = new Event('this-is-my-custom-event', {bubbles: true}); // bubbles
// const event = new Event('this-is-my-custom-event'); // won't bubble by default
const element = document.querySelector('body');
element.dispatchEvent(event);
console.log('after dispatch');
};
}
customEventHandling();