** How event.target Works in Nested Elements
Consider three div elements:
A: The outermost div.
B: A div inside A.
C: A div inside B.
When you click on one of these elements, event.target refers to the element that was directly clicked, even if it is inside a parent element.
- Clicking directly on C (the innermost div inside B, which is inside A):
event.target will be C because that's the element that the user clicked.
- Clicking on B but not inside C:
If the click occurs on a part of B that isn't inside C, event.target will be B.
- Clicking on an area where B and C overlap:
If you click on the overlapping area between B and C, the click is considered to have occurred on the innermost element. In this case, event.target will be C, because C is the deepest element in the DOM tree at the click location.
Key Points:
event.target always refers to the innermost element that was clicked.
Events will bubble up from event.target to its parent elements. This means that after the event is triggered on the clicked element (event.target), the event then propagates (or "bubbles up") to its parent elements in the DOM. For example, if you click on C, the event will first trigger on C, then bubble up to B, and then to A, triggering any event listeners attached to those parent elements. However, the value of event.target remains the same throughout the bubbling process, always referring to the element where the event originally occurred (C in this case).
** Use Event Delegation for Better Performance
** Bad
let items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('click', function() {
console.log('Item clicked!');
});
});
** vs Good
document.getElementById('container').addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
console.log('Item clicked!');
}
});
** Separate DOM Interaction from Logic
Keep your business logic separate from DOM manipulation. This makes your code more modular, easier to test, and maintain. For example
** good
function changeButtonStyle(buttonElement) {
buttonElement.style.backgroundColor = 'blue';
buttonElement.innerText = 'Clicked!';
}
let button = document.getElementById('button');
changeButtonStyle(button);
**bad
function updateUI() {
let el = document.getElementById('button');
el.style.backgroundColor = 'blue';
el.innerText = 'Clicked!';
}
** Object-Based Namespace in JavaScript
An object-based namespace groups related variables, functions, and settings into a single object to avoid global scope pollution and improve maintainability.
Benefits:
- Organization: Groups related logic under one object
- Avoids Naming Collisions: Encapsulates functions/variables to prevent conflicts in the global scope
- Single Access Point: Access all functions/properties through one object, simplifying code
- Modular & Scalable: Easily extend the namespace by adding new properties/methods
- Easier Maintenance: Simplifies managing and modifying related code
// Define the namespace object
const MyApp = {
settings: {
appName: "My Simple App",
version: "1.0"
},
ui: {
greet: function() {
console.log("Welcome to " + this.settings.appName);
}
}
};
// Access the namespace functions and properties
console.log(MyApp.settings.appName); // Output: My Simple App
MyApp.ui.greet(); // Output: Welcome to My Simple App
** Asynchronous JavaScript
Modern web apps often require asynchronous operations, such as fetching data from a server without blocking the page. You can handle these with setTimeout, setInterval, Promises, and async/await.
** Using setTimeout and setInterval
// setTimeout: Executes after a delay
setTimeout(function() {
alert('This runs after 2 seconds!');
}, 2000);
// setInterval: Executes repeatedly at a set interval
let intervalId = setInterval(function() {
console.log('This runs every 1 second');
}, 1000);
** Promises and async/await
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}