Day25 of #100DaysOfCode

#CodeTogether Day 25/100

Hii folks 🙌

Today I have completed the 25th video of JavaScript30!

Project 25: Event Capture, Propagation, Bubbling, and Once

Source: https://javascript30.com

Learnings:

We have been tasked to understand some amazing things about event listeners. Let’s dive into this!

• 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 set capture to true in third options parameter, will reverse this direction.

divs.forEach(div => div.addEventListener('click', logText, {    capture: false}));

• 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.

divs.forEach(div => div.addEventListener('click', logText, {    once: true}));

• 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

Today I Learned (T-I-L):

• Event capture
• Event Propagation, Bubbling, and Once!

That is all for Day25 ✅

Thanks for reading, See you tomorrow!