Events
In web development, events are actions or occurrences that happen in the browser. Examples of events include clicking a button, submitting a form, pressing a key, resizing the browser window, etc. These events are generated by users or the browser itself.
Event Handling
Event handling is the process of defining specific actions or behaviors that should occur in response to a particular event. In other words, it’s how you make your web application respond to user interactions or other events.
Event Listeners
Event listeners are functions that “listen” for specific events on specific HTML elements and execute a given piece of code (a callback function) when that event occurs. Event listeners allow you to attach interactivity to your web pages.
Here’s an example of attaching an event listener to a button element in JavaScript:
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});In this example, when the button with the ID myButton is clicked, the provided callback function will be executed, displaying an alert.
Event Propagation and Delegation:
Event Propagation:
When an event occurs on an element in the DOM (Document Object Model), it doesn’t just affect that element. It goes through a process called event propagation, which involves two phases: capturing phase and bubbling phase.
Capturing Phase: The event starts from the root of the DOM and travels down to the target element. This is less commonly used in practice.
Bubbling Phase: After the event reaches the target element, it “bubbles” up through its parent elements all the way to the root of the DOM.
Event Delegation:
Event delegation is a technique that takes advantage of event propagation. Instead of attaching event listeners to individual elements, you attach a single event listener to a common ancestor of multiple elements you’re interested in. This way, you can respond to events on multiple elements using a single listener.
Benefits of event delegation:
- Reduced memory consumption (since you’re not attaching listeners to every element).
- Dynamic handling of elements added to the DOM after the initial page load.
- Improved performance when dealing with large numbers of elements.
Here’s an example of event delegation:
const parentElement = document.querySelector('#parent');
parentElement.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('List item clicked: ' + event.target.textContent);
}
});In this example, a click event listener is attached to the parent element. When a list item (LI) is clicked, the event bubbles up to the parent, and the callback function checks if the clicked element is an LI element. If so, it displays an alert.
One More Example:
Suppose we have an unordered list (ul) of items, and we want to highlight the clicked item when it’s selected.
HTML:
<ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS:
li {
cursor: pointer;
padding: 10px;
}
li.active {
background-color: yellow;
}JavaScript:
const itemList = document.getElementById('itemList');
// Event delegation - attaching one listener to the parent ul
itemList.addEventListener('click', function(event) {
// Check if the clicked element is an li
if (event.target.tagName === 'LI') {
// Remove 'active' class from all li elements
const items = itemList.getElementsByTagName('li');
for (let item of items) {
item.classList.remove('active');
}
// Add 'active' class to the clicked li
event.target.classList.add('active');
}
});In this example, we use event delegation to handle the click events for all list items. When a list item is clicked, the event bubbles up to the parent ul element, and we use the event object’s target property to determine which list item was clicked. We then remove the ‘active‘ class from all list items and add it to the clicked item, which changes its background color.
The key takeaways from this example are:
- We attach a single event listener to the parent ul element using addEventListener.
- We use event delegation to handle clicks on individual list items.
- By toggling the ‘active’ class, we visually highlight the clicked item.
Understanding events, event handling, event propagation, and event delegation is crucial for building interactive and responsive web applications. These concepts allow you to create engaging user experiences and make your applications more user-friendly.
You can also discover a lot about Javascript by exploring different topics.
Note: We welcome your feedback at Easy coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!