title: "Trickle-down" custom JavaScript events
body: <p>I'm looking into custom events in JavaScript.</p>
  
  <p>According to MDN, using the CustomEvent constructor, there is an option to make the event "bubble up" (false by default):</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#CustomEventInit" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#CustomEventInit</a></p>
  
  <p>Example:</p>
  
  <pre><code>// add an appropriate event listener
  obj.addEventListener("cat", function(e) { process(e.detail) });
  
  // create and dispatch the event
  var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
  obj.dispatchEvent(event);
  </code></pre>
  
  <p>I tested it on jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/ppx4gcxe/" rel="noreferrer">http://jsfiddle.net/ppx4gcxe/</a></p>
  
  <p>And the bubble up functionality seems to work. But I'd like my custom event to "trickle down", that is to trigger even listeners on child elements; the opposite of bubbling up.</p>
  
  <p>I vaguely remember some default browser events "trickling down". This was supposedly one of these points of contention in the early browser days.</p>
  
  <p>Anyway, is there any way to get this functionality on my custom events? Any relatively easy and straightforward way, of course. I don't really want to write a function to traverse all child elements and manually trigger any listeners on them. I hope there's another way.</p>