Here's an example:
<div id="parent">
<div id="child">
<a href="#" id="anchor1">Click Me</a>
</div>
<div id="sibling">
<a href="#" id="anchor2">Click Me</a>
</div>
</div>
Look at the hierarchy of this snippet, it looks kind of like this
parent
/ \
child sibling
| |
anchor1 anchor2
Whenever an event (like a click, focus, hover) happens in JavaScript, the event object that occurs tries to get to the top of the hierarchy. If I was to mouseover anchor1, then, child and parent would also receive the mouseover event object because it would 'bubble up' the tree.
If I was to mouseover anchor2, sibling and parent (and anything above them) would also receive the event object.
You can stop an event object from bubbling up the tree using certain methods like returning false in a callback or using the .stopPropagation() method (https://developer.mozilla.org/en/DOM/event.stopPropagation) which, quite literally, stops the event from propagating up the tree.
Hopefully that sheds some light on it for you. Great question by the way, it's great to know how DOM events actually work - makes trouble shooting a lot easier than if you just started using them without understanding them.