Bubbling FTW!

Previously coming from ActionScript/AS3 code I always loved the event bubbling features which allowed me to set event handlers at a higher level than the current element and capture the currentTarget.

I now realize this is possible in JavaScript as well! As Abed from the show Community would say. “Cool. Cool.”

Now normally i would do something like this


Well this is silly. 4 event handlers are added in this example. You could imagine that with n items we are talking about n event handlers for overhead. Turns out bubbling can come to the rescue!

Let’s consider doing the same block of code with only one event handler.


So by setting the click handler on the ul list and waiting for the element to bubble to that point we eliminated all those extra click handlers. And if you ever wanted to stop the bubbling you can always do a stopPropagation();

1 12 13 14