Categories
JavaScript Tips & Tutorials

DOM event detection: event bubbling and event capturing

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.

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.