Add Class To Event Target Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

36

Share

Adding a Class to an Event Target in JavaScript

This article will guide you through adding a class to an element that triggers an event in JavaScript. This technique is useful for styling elements based on their interaction, for instance, highlighting a button when it is clicked.

Understanding the Basics

• Event Target: The element that triggers an event, such as a click or hover.
• event.target: An object that represents the element that triggered the event.
• classList: A property of the event.target object that allows you to manipulate the element's class list.

Adding a Class

Here's how you can add a class to the event target:

// Select the element that will trigger the event
const button = document.querySelector('.my-button');

// Define the class to be added
const addedClass = 'active';

// Add an event listener to the element
button.addEventListener('click', function(event) {
  // Add the class to the event target
  event.target.classList.add(addedClass);
});

Explanation:

1. We select the element to which we'll attach the event listener (in this case, a button with the class my-button).
2. We define the class name we want to add (here, it's active).
3. We add a click event listener to the button.
4. When the button is clicked, the event listener's function executes:
   • event.target refers to the clicked button.
   • classList.add(addedClass) adds the active class to the button's existing classes.

Removing the Class

You might want to remove the class after the event has been handled. This can be achieved using classList.remove():

// Select the element that will trigger the event
const button = document.querySelector('.my-button');

// Define the class to be added and removed
const addedClass = 'active';

// Add an event listener to the element
button.addEventListener('click', function(event) {
  // Add the class to the event target
  event.target.classList.add(addedClass);

  // Remove the class after a short delay
  setTimeout(() => {
    event.target.classList.remove(addedClass);
  }, 500); // Delay for 500 milliseconds (half a second)
});

Explanation:

1. We use setTimeout() to delay the execution of the code that removes the class. This creates a visual effect of the class being applied briefly before being removed.
2. After the specified delay, the classList.remove() method removes the active class from the button.

Conclusion

Adding classes to event targets in JavaScript provides a flexible way to manipulate the styling of your web elements based on user interaction. This technique is particularly useful for creating dynamic visual effects, such as hover highlighting, active states, or visual feedback for form interactions.