Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #549

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ All the translations for this repo will be listed below:
31. **[Design Patterns](#31-design-patterns)**
32. **[Partial Applications, Currying, Compose and Pipe](#32-partial-applications-currying-compose-and-pipe)**
33. **[Clean Code](#33-clean-code)**

34. **[Additonal Concepts](additional-concept)**
---

## 1. Call Stack
Expand Down Expand Up @@ -1282,7 +1282,43 @@ The Event Loop is a critical part of JavaScript’s concurrency model, ensuring
- 🎥 [JavaScript Clean Code](https://youtu.be/vPXzVNmCPg4?si=QR1k4E6Zx5H4mfcs)
- 🎥 [Tips On Learning How To Code](https://www.youtube.com/watch?v=0wHyoBPc6zs)

## Additional Concept
# Event Bubbling in JavaScript

Event bubbling is a fundamental concept in JavaScript that refers to how events propagate up through the DOM (Document Object Model). When an event, such as a `click`, occurs on an element, it doesn't just stop there—it "bubbles" up to its parent elements and continues to propagate all the way up to the root element (`document`).

This propagation follows the event flow, starting from the innermost target element (where the event is triggered) and moving outward through the ancestors, following the DOM hierarchy. By default, JavaScript uses the event bubbling model, but it also allows developers to control and manipulate this behavior.

## Example of Event Bubbling

Consider a scenario where you have a button inside a `div`. When you click the button, the event propagates and is also captured by the `div` unless event bubbling is stopped explicitly.

### <!-- HTML Structure -->
<div id="parent">
<button id="child">Click Me</button>
</div>


**[⬆ Back to Top](#table-of-contents)**

## <img align= center width=50px height=50px src="https://moein.video/wp-content/uploads/2022/05/license-GIF-Certificate-Royalty-Free-Animated-Icon-350px-after-effects-project.gif"> License <a id = "License"></a>
// JavaScript to handle the click event
document.getElementById("parent").addEventListener("click", function () {
console.log("Parent div clicked!");
});

document.getElementById("child").addEventListener("click", function (event) {
console.log("Button clicked!");
// Uncomment the following line to stop event bubbling
// event.stopPropagation();
});
element.addEventListener('click', eventHandler, true); // Capturing phase
element.addEventListener('click', eventHandler, false); // Bubbling phase (default)
document.getElementById("parent").addEventListener("click", function (event) {
if (event.target.tagName === "BUTTON") {
console.log("Button inside parent div clicked!");
}
});


This software is licensed under MIT License, See [License](https://github.com/leonardomso/33-js-concepts/blob/master/LICENSE) for more information ©Leonardo Maldonado.