Event Delegation & Manipulating Classes in JavaScript DOM

JavaScript provides powerful techniques for handling events efficiently using event delegation and managing CSS classes dynamically with the classList property.

1. Event Delegation

What It Does:

• Allows handling multiple child elements' events using a single event listener on a parent element.

• Uses event.target to identify which child element triggered the event.

• Improves performance by reducing the number of event listeners in the document.

Syntax:

document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.matches(".child")) {
    console.log("Child element clicked:", event.target.textContent);
  }
});

Real-Life Examples:

1. Handling Click Events on a List of Items Dynamically

    <ul id="itemList">
      <li class="item">Item 1</li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
    </ul>
    <script>
      document.getElementById("itemList").addEventListener("click", function(event) {
        if (event.target.classList.contains("item")) {
          alert("Clicked on: " + event.target.textContent);
        }
      });
    </script>
   

2. Managing a Button Group Dynamically

    <div id="buttonContainer">
      <button class="btn">Button 1</button>
      <button class="btn">Button 2</button>
    </div>
    <script>
      document.getElementById("buttonContainer").addEventListener("click", function(event) {
        if (event.target.classList.contains("btn")) {
          event.target.style.backgroundColor = "green";
        }
      });
    </script>
   

3. Handling Form Inputs Dynamically

    <div id="formContainer">
      <input type="text" class="input-field" placeholder="Type here">
    </div>
    <script>
      document.getElementById("formContainer").addEventListener("input", function(event) {
        if (event.target.classList.contains("input-field")) {
          console.log("User typed: " + event.target.value);
        }
      });
    </script>
   

2. Manipulating Classes (classList)

What It Does:

• Allows adding, removing, toggling, and checking for CSS classes dynamically.

• Useful for styling elements without modifying inline styles directly.

Methods:

1. classList.add("className") – Adds a class.

2. classList.remove("className") – Removes a class.

3. classList.toggle("className") – Toggles a class (adds if absent, removes if present).

4. classList.contains("className") – Checks if an element has a class.

Syntax:

document.getElementById("element").classList.add("newClass");
document.getElementById("element").classList.remove("oldClass");
document.getElementById("element").classList.toggle("toggleClass");

Real-Life Examples:

1. Adding a Class When Button Clicked

    <button id="myButton">Click Me</button>
    <script>
      document.getElementById("myButton").addEventListener("click", function() {
        this.classList.add("clicked");
      });
    </script>
    <style>
      .clicked { background-color: red; color: white; }
    </style>
   

2. Removing a Class on Hover

    <div id="hoverBox" class="highlight">Hover over me</div>
    <script>
      document.getElementById("hoverBox").addEventListener("mouseover", function() {
        this.classList.remove("highlight");
      });
    </script>
    <style>
      .highlight { background-color: yellow; }
    </style>
   

3. Toggling a Dark Mode Class

    <button id="darkModeBtn">Toggle Dark Mode</button>
    <script>
      document.getElementById("darkModeBtn").addEventListener("click", function() {
        document.body.classList.toggle("dark-mode");
      });
    </script>
    <style>
      .dark-mode { background-color: black; color: white; }
    </style>
   

Conclusion

• Event delegation improves efficiency by using a single event listener for multiple elements.

• event.target helps identify the clicked element inside a parent container.

• classList methods allow dynamic class manipulation, making UI interactions smoother.

Mastering these techniques will help create dynamic, interactive, and efficient web applications! 🚀