Javascript 30 (Day 25)

Event Capture, Propagation, Bubbling and Once

Usmaan Ali
Aug 25, 2017 · 1 min read

Demo can be found here (open up dev tools).

What I learned on this mini-project.

capture

When an event listener has been attached to a DOM element whose parent has the same listener. triggering the event will lead to both elements firing.

By default the events will be triggered from the inside out, but setting capture to true in third options parameter, will reverse this direction.

once

This is a useful option for the addEventListener method, that will prevent the element from triggering multiple events. It has the same functionality as removeEventListener for those higher in the chain.

Event Propagation

This is the blanket term that refers to bubbling and capturing. It essentially means that events will cascade up and down the DOM, from the target element all the way up to the window object.

The direction of propagation can be both ways.

A nice summary of the concept is explained by dividing it into three phases.

This was taken from the following article.

  • capture phase - From the window to the event target
  • target phase - The event target
  • bubble phase - From the event target back to the window

Originally published at gist.github.com.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade