Self-Taught Developer Journal, Day 42: TOP DOM Manipulations and Events Practice cont.

Today...

Practice #2:

1. Watch the Event Capture, Propagation and Bubbling video from Wes Bos’s JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.

I found this video to be very interesting because Event Propagation is definitely something I've never encountered before or wouldn't have know about firsthand.

As much as I liked Wes's explanation of Event Bubbling in the video, I was still unsure of what was happening. I went ahead and Googled for more information about it. I think the GeeksOnGeeks definition captures it really well:

"Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy. In event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements".

Event Bubbling triggers a selection of all associated elements, a rippling effect. However, not all events bubble.

An image from javascript.info was a good visual example of the effect.

Event Bubbling can be stopped using the stopPropagation() on the event.

BUT DON'T STOP BUBBLING UNLESS NEEDED!

Next, the video went over Event Capturing which is another phase of Event Propagation ("Event propagation is a way to describe the “stack” of events that are fired in a web browser.*)

Unlike Event Bubbling, Event Capturing starts from the top-down to the element. Event Propagation has three phases:

1. Capture Phase
2. Target Phase
3. Bubbling Phase

The capture phase is rarely used and is implemented by setting the handler "capture" option to true.

Resources

The Odin Project
https://javascript.info/bubbling-and-capturing
https://www.geeksforgeeks.org/event-bubbling-in-javascript/
https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/