Lesson 10: Advanced Event Handling

In this lesson, we will explore advanced techniques for handling events in JavaScript. This includes event propagation, custom events, and managing multiple events.

Event Propagation

1. What is Event Propagation?

Event propagation refers to the way events bubble up or capture down through the DOM hierarchy. There are two phases: capturing and bubbling.

2. Event Bubbling

Event bubbling is the process where the event starts from the target element and bubbles up to the root of the DOM tree.

      document.getElementById("inner").addEventListener("click", function() {
          alert("Inner element clicked");
      });
      
      document.getElementById("outer").addEventListener("click", function() {
          alert("Outer element clicked");
      });
          

Example of Event Bubbling:

      <div id="outer">
          Outer Div
          <div id="inner">Inner Div</div>
      </div>
      
      document.getElementById("inner").addEventListener("click", function() {
          alert("Inner element clicked");
      });
      
      document.getElementById("outer").addEventListener("click", function() {
          alert("Outer element clicked");
      });
              

3. Event Capturing

Event capturing (or trickling) is the process where the event starts from the root and trickles down to the target element.

      document.getElementById("outer").addEventListener("click", function() {
          alert("Outer element clicked");
      }, true);
          

Example of Event Capturing:

      <div id="outer">
          Outer Div
          <div id="inner">Inner Div</div>
      </div>
      
      document.getElementById("outer").addEventListener("click", function() {
          alert("Outer element clicked");
      }, true);
              

Custom Events

1. Creating Custom Events

Custom events can be created using the `CustomEvent` constructor to allow your code to dispatch and listen for custom events.

      const customEvent = new CustomEvent("myCustomEvent", { detail: { key: "value" } });
      
      document.dispatchEvent(customEvent);
      
      document.addEventListener("myCustomEvent", function(event) {
          console.log(event.detail.key);
      });
          

Example of Custom Events:

      const customEvent = new CustomEvent("myCustomEvent", { detail: { key: "value" } });
      
      document.dispatchEvent(customEvent);
      
      document.addEventListener("myCustomEvent", function(event) {
          console.log(event.detail.key);
      });
              

Managing Multiple Events

1. Adding Multiple Event Listeners

Multiple event listeners can be added to a single element for different events.

      const button = document.getElementById("myButton");
      button.addEventListener("click", function() {
          alert("Button clicked!");
      });
      button.addEventListener("mouseover", function() {
          button.style.backgroundColor = "yellow";
      });
          

Example of Multiple Event Listeners:

      <button id="myButton">Hover and Click Me</button>
      
      const button = document.getElementById("myButton");
      button.addEventListener("click", function() {
          alert("Button clicked!");
      });
      button.addEventListener("mouseover", function() {
          button.style.backgroundColor = "yellow";
      });
              

Removing Event Listeners

1. Removing Event Listeners

Event listeners can be removed using the `removeEventListener` method. Make sure to use the same function reference when removing an event listener.

      function handleClick() {
          alert("Button clicked!");
      }
      
      const button = document.getElementById("myButton");
      button.addEventListener("click", handleClick);
      button.removeEventListener("click", handleClick);
          

Example of Removing Event Listeners:

      <button id="myButton">Click Me</button>
      
      function handleClick() {
          alert("Button clicked!");
      }
      
      const button = document.getElementById("myButton");
      button.addEventListener("click", handleClick);
      button.removeEventListener("click", handleClick);