Event Bubbling and Event Capturing in JavaScript | The Complete JavaScript Course | Ep.65

00:00 Event Bubbling and Event Capturing in JavaScript
02:51 Understanding event bubbling in JavaScript
08:09 Event bubbling in JavaScript triggers events from child to parent elements.
16:28 Understanding Event Bubbling and Event Capturing in JavaScript

Social Media

Music by geoffharvey from Pixabay

[MukassarShaikh]

Such an important concept in web development—we're constantly working with events!

[NetraPatwari]

I m lucky that YT algorithm recommended this channel.

[vishalmishrausername]

Event Bubbling:
Event bubbling is a concept in JavaScript where an event triggered on a nested element propagates up through its parent elements in the DOM tree.

How it Works:
When an event occurs on an element:
1. Event is triggered: The event is triggered on the target element.
2. Event bubbles up: The event then "bubbles up" through the DOM tree, triggering the same event on each parent element.

Example:
<div id="parent">
<button id="child">Click me</button>
</div>
<script> document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
}); document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked");
});
</script>

//Output:
//Child clicked
//Parent clicked

Use Cases:
1. Event delegation: You can attach event listeners to parent elements and handle events for multiple child elements.
2. Preventing Unwanted Triggers: Use stopPropagation() to reduce the number of event listeners needed.

Event Capturing:
Event capturing is the opposite of event bubbling. Instead of the event starting from the target element and bubbling up to its parents, event capturing starts from the topmost parent element and trickles down to the target element.

How it Works:
1. *Event capture phase*: The event starts from the topmost parent element (usually the `document` object) and trickles down to the target element.
2. *Target phase*: The event reaches the target element.
3. *Event bubble phase*: The event then bubbles up from the target element to its parents.

Example
To enable event capturing, a third argument set to true needs to be passed to the addEventListener method:
```
element.addEventListener('event', function, true);

OR

element.addEventListener('event', function, { capture: true });
```

Use Cases:
1. *You want to intercept events*: Before they reach the target element.
2. *You need to handle events differently*: Depending on the capture or bubble phase.

Note: Event Capturing vs Event Bubbling
- Event capturing: Top-down approach (parent to child)
- Event bubbling: Bottom-up approach (child to parent)

[anik]

very very essential tutorial sir in hindi language thank you

[samith-ny]

I started this playlist This is day 10 I know basics of javascript so I will binge watch basic part and if I found any topic which I don't know then I will try that topic

[dsagamer]

Thanking youtube algo for recommending this channel 🙌

[Pushpak_UE_devlover]

Day 14 to breack lena pada Qki aaj mera DBMS ka university exam thaa
paper kafi achha likha hai mera conceptual understanding DBMS may near aboute GATE level ka hai aur practical bhi achhe saay aata hai transaction vala practical nahi kara tha syntax usecase vo sab pata hai lekin
I started this playlist This is day 15 I know basics of javascript so I will binge watch basic part and if I found any topic which I don't know then I will try that topic

[Priyanshubihari]

U r the best teacher bhai .wse bihar se ho kya😅

[learncode]

Sir OOPS using javascript be cover hone wala hy?