At this point, we should ask an important question—if an element and one of its ancestors have a handler on the same event, which handler will be fired first? Consider the following figure:
For example, we have Element2 as a child of Element1 and both have the onClick handler. When a user clicks on Element2, onClick on both Element2 and Element1 is triggered but the question is which one is triggered first. What should the event order be? Well, the answer, unfortunately, is that it depends entirely on the browser. When browsers first arrived, two opinions emerged, naturally, from Netscape and Microsoft.
Netscape decided that the first event triggered should be Element1's onClick. This event ordering is known as event capturing.
Microsoft decided that the first event triggered should be Element2's onClick. This event ordering is known as event bubbling.
These are two completely opposite views and implementations of how browsers handled events. To end this madness, World Wide Web Consortium...