DOM event detection: event bubbling and event capturing

by Yang Yang on September 25, 2007

Share This Article:
Subscribe to Kavoir: blog feed

There’s essentially 2 ways for the DOM to detect any events, namely event capturing and event bubbling.

Event capturing is a method that the browser captures the event from the top elements to the bottom where the event actually takes place. For example, the moment you click on an <img> which is the child of a <p> which is further spawned from a <div>, the document element namely <body> captures the event first before it gets down the path to the eventual source of the event, that is the <img>.

Event bubbling is just the other way around where the event propagation actually goes inside out. Picture the sound waves travelling in air. With an <img> inside a <p> which is inside a <div>, a click on the image would first be seen and processed from the original target first, then the <p>, and the <div>, finally the document element at the root.

events bubbling and events capturing

Internet Explorer doesn’t have an implementation of event capturing, so events triggered in it can only travel from bottom to the top, a.k.a the bubbling way.

Share This Article:
Subscribe to Kavoir: blog feed

You should also read:

Leave a Comment

Previous post:

Next post: