Exploring the concept of custom events in JavaScript.
Per MDN, the CustomEvent constructor allows for the event to "bubble up" (default is false):
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#CustomEventInit
Here's an example:
// set up event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
I conducted a test on jsfiddle:
The bubbling up feature appears to be functioning. However, I am interested in having my custom event "trickle down," triggering listeners on child elements instead; essentially, the opposite of bubbling up.
I vaguely recall default browser events that had a "trickling down" behavior. This was reportedly a point of contention in the early days of browsers.
Regardless, is there a way to achieve this functionality with my custom events? Ideally, a relatively simple and direct method without manually traversing child elements to trigger listeners. Hoping for an alternative approach.