Lesson 9: Introduction to JavaScript Events

Events are actions or occurrences that happen in the browser, such as user interactions. JavaScript can be used to handle these events and perform actions in response. This lesson introduces the basic concepts of JavaScript events and how to work with them.

Understanding Events

1. What is an Event?

An event is an action that occurs in the browser, like a user clicking a button, typing into a text field, or hovering over an element.

2. Event Types

Common event types include:

• Click: Triggered when an element is clicked.
• Mouseover: Triggered when the mouse pointer hovers over an element.
• Keydown: Triggered when a key is pressed down.
• Submit: Triggered when a form is submitted.

Event Handling

1. Inline Event Handlers

You can add event handlers directly in the HTML using attributes like `onclick`, `onmouseover`, etc.

      <button onclick="alert('Button clicked!')">Click Me</button>
          

Example of Inline Event Handlers:

      <button onclick="alert('Button clicked!')">Click Me</button>
              

2. Event Listeners

Event listeners are added using JavaScript, allowing for more flexibility and separation of HTML and JavaScript code.

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

Example of Event Listeners:

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

Event Object

1. What is the Event Object?

The event object is a parameter passed to event handlers, providing information about the event that occurred.

2. Accessing Event Properties

You can access properties of the event object, such as `event.target`, `event.type`, and `event.clientX`.

      document.getElementById("myButton").addEventListener("click", function(event) {
          console.log("Clicked element:", event.target);
          console.log("Event type:", event.type);
      });
          

Example of Event Object:

      <button id="myButton">Click Me</button>
      
      document.getElementById("myButton").addEventListener("click", function(event) {
          console.log("Clicked element:", event.target);
          console.log("Event type:", event.type);
      });
              

Event Delegation

1. What is Event Delegation?

Event delegation involves adding a single event listener to a parent element instead of multiple listeners to child elements.

2. Implementing Event Delegation

Use event delegation to manage events on dynamically added elements efficiently.

      document.getElementById("parentElement").addEventListener("click", function(event) {
          if (event.target && event.target.matches("button")) {
              alert("Button inside parent clicked!");
          }
      });
          

Example of Event Delegation:

      <div id="parentElement">
          <button>Button 1</button>
          <button>Button 2</button>
      </div>
      
      document.getElementById("parentElement").addEventListener("click", function(event) {
          if (event.target && event.target.matches("button")) {
              alert("Button inside parent clicked!");
          }
      });