Javascript 30 (Day 25)
Event Capture, Propagation, Bubbling and Once
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 targettarget phase- The event targetbubble phase- From the event target back to the window
Originally published at gist.github.com.
