Scribd
Upload
18 views6 pages

Event Bubbling and Capturing

Uploaded by

Shopre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views6 pages

Event Bubbling and Capturing

Uploaded by

Shopre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

JavaScript’s event system is a crucial part of interactive

web applications. Understanding how events propagate


through the Document Object Model (DOM) can help you
manage event handling more effectively. In this post, we’ll
delve into event bubbling and capturing, explore how they
work, and see practical examples to help you master these
concepts.

The DOM Event Flow

When an event occurs in the DOM, it doesn’t happen in


isolation. Instead, it follows a specific flow through the
document hierarchy. This flow has three phases:

1. Capturing Phase: The event starts from the


root of the document and travels down to the
target element.

2. Target Phase: The event reaches the target


element.

3. Bubbling Phase: The event bubbles up from the


target element back to the root.

Event Capturing

In the capturing phase, also known as trickling, the event


starts from the topmost element (usually document) and
travels down to the target element. Event capturing is less
commonly used compared to bubbling, but it can be useful
in certain scenarios.

Example: Event Capturing

<!DOCTYPE html>
<html>
<body>
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', (event) => {
console.log('Outer Div Capturing');
}, true);
document.getElementById('inner').addEventListener('click', (event) => {
console.log('Inner Div Capturing');
}, true);
</script>
</body>
</html>

Output:
Outer Div Capturing
Inner Div Capturing

In this example, setting the third argument


of addEventListener to true enables event capturing. When the
inner div is clicked, the event is first captured by the outer
div and then by the inner div.

Event Bubbling

Event bubbling is the default behavior in JavaScript. In this


phase, the event starts from the target element and
bubbles up through its ancestors until it reaches the root
element.

Example: Event Bubbling

<!DOCTYPE html>
<html>
<body>
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', (event) => {
console.log('Outer Div Bubbling');
});
document.getElementById('inner').addEventListener('click', (event) => {
console.log('Inner Div Bubbling');
});
</script>
</body>
</html>

Output:

Inner Div Bubbling


Outer Div Bubbling

In this example, when the inner div is clicked, the event


bubbles up to the outer div, and both event handlers are
executed.

Stopping Propagation
Sometimes, you might want to stop the event from
propagating further. JavaScript provides two methods for
this purpose: stopPropagation and stopImmediatePropagation.

Example: Stopping Propagation

<!DOCTYPE html>
<html>
<body>
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', (event) => {
console.log('Outer Div');
});
document.getElementById('inner').addEventListener('click', (event) => {
console.log('Inner Div');
event.stopPropagation();
});
</script>
</body>
</html>

Output:

Inner Div

In this example, the stopPropagation method prevents the


event from bubbling up to the outer div, so only the inner
div's event handler is executed.

Event Delegation
Event delegation is a technique that leverages event
bubbling to handle events more efficiently. Instead of
attaching event listeners to multiple child elements, you
can attach a single event listener to a common parent
element and manage events through it.

Example: Event Delegation

<!DOCTYPE html>
<html>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log('Clicked:', event.target.textContent);
}
});
</script>
</body>
</html>

Output:

Clicked: Item 1
Clicked: Item 2
Clicked: Item 3

In this example, the event listener is attached to


the ul element. When any li element is clicked, the event
bubbles up to the ul, where it is handled by a single event
listener.
Practical Use Cases

1. Form Validation: Use event delegation to


manage validation for multiple input fields by
attaching a single event listener to the form.

2. Dynamic Content: Handle events for


dynamically added elements without needing to
rebind event listeners.

3. Performance Optimization: Reduce the


number of event listeners, improving
performance and memory usage.

Conclusion

Understanding event bubbling and capturing is essential


for effective event handling in JavaScript. By mastering
these concepts, you can write more efficient, maintainable,
and performant code. Whether you’re stopping
propagation to manage event flow or using event
delegation to simplify event handling, these techniques will
help you navigate the DOM event system with confidence.

Happy coding!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy