wannabit who do you wanna bit

Which is the difference between event capture and event bubbling?

The DOM has two ways for objects to detect events: from the top down, and from the bottom up. The first method is known as event capture, the second is called event bubbling.

Event Capture
Let's say that your document contains a
<div> which contains a <span> which contains an <img alt="" />. Further, let's say you've added an event listener to all of them. When a user clicks on the image, a mouseclick event occurs.

Even though the user clicked the image, the image doesn't get the event first. Instead, the event listener attached to the document grabs the event first and processes it. The event is then passed down to the
<div>'s event listener. The event then goes to the <span>, and finally to the <img alt="" />. That is, all of the clicked-on object's "ancestors" higher up in the document capture the event for processing before sending it down the chain to its intended target.

Event Bubbling
Now let's look at the same situation from the inside out. You have an <img alt="" /> inside a
<span> , which is inside a <div>, which is inside your document. When a user clicks the image, this time the events rise like a bubble in a glass of water. The click's original target, the <img alt="" />, gets to see the event first, and then passes it upwards to the <span> for further processing, which passes it on to the <div> , which finally passes it up to the document.