<div> <h1> <a href="#"> <span>Hello</span> </a> </h1> </div>
Lets assume we click the
span, which causes a
click event to be fired on the
span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the
<a>), and a
click event is fired on that. This process repeats for the next parent (or ancestor) up to the
You can see this in action here. Click “Hello” and see the events as they get fired.
Ok, that’s a little bit of a lie… sort of.
By default, not all events bubble. For instance
submit does not normally bubble, nor does
change. However, jQuery masks this in the event handling code using all sorts of voodoo, so it will seem that they do bubble when using jQuery.