The Event object in JavaScript is a powerful construct that provides detailed information about events that occur in the DOM (Document Object Model). Whenever an event is triggered (like a click, keypress, or form submission), the event handler is passed an Event object, which contains properties and methods to help you understand and manipulate the event.

What is the Event Object?

The Event object represents the state of an event (such as a user interaction or browser-generated event) and contains information about the event's characteristics. This object is automatically passed to event handler functions as the first parameter.

Key Properties of the Event Object

Here are some of the most commonly used properties of the Event object:

1. type

   • Description: A string representing the type of event (e.g., 'click', 'keydown', 'submit').
   • Usage: Helps you identify what kind of event occurred.
   • Example:

     document.addEventListener('click', function(event) {
       console.log(event.type); // Outputs: 'click'
     });
     

2. target

   • Description: A reference to the element that triggered the event (the event target).
   • Usage: Allows you to access and manipulate the element that initiated the event.
   • Example:

     document.addEventListener('click', function(event) {
       console.log(event.target); // Outputs: the element that was clicked
     });
     

3. currentTarget

   • Description: A reference to the element to which the event listener is attached. This is useful when using event delegation.
   • Usage: Useful when you need to distinguish between the target and the element handling the event.
   • Example:

     document.querySelector('#myDiv').addEventListener('click', function(event) {
       console.log(event.currentTarget); // Outputs: #myDiv
     });
     

4. preventDefault()

   • Description: A method that prevents the default action associated with the event from occurring.
   • Usage: Use this when you want to stop an event's default behavior, like preventing a form from submitting.
   • Example:

     document.querySelector('a').addEventListener('click', function(event) {
       event.preventDefault(); // Prevents the link from navigating
     });
     

5. stopPropagation()

   • Description: A method that prevents the event from bubbling up the DOM tree.
   • Usage: Use this to stop the event from reaching other event listeners in the event chain.
   • Example:

     document.querySelector('#child').addEventListener('click', function(event) {
       event.stopPropagation(); // Prevents the event from reaching the parent elements
     });
     

6. stopImmediatePropagation()

   • Description: Stops the event from propagating and prevents other listeners on the same element from being triggered.
   • Usage: Useful when you want to ensure that no further event listeners are executed.
   • Example:

     document.querySelector('#myButton').addEventListener('click', function(event) {
       event.stopImmediatePropagation();
       console.log('This is the only click handler that runs.');
     });
     

7. bubbles

   • Description: A boolean value indicating whether the event bubbles up through the DOM or not.
   • Usage: Useful to check if the event will propagate up the DOM.
   • Example:

     document.addEventListener('click', function(event) {
       console.log(event.bubbles); // Outputs: true for most events
     });
     

8. cancelable

   • Description: A boolean value indicating whether the event's default action can be prevented (true) or not (false).
   • Usage: Before calling preventDefault(), you might check if the event is cancelable.
   • Example:

     document.addEventListener('click', function(event) {
       console.log(event.cancelable); // Outputs: true for most user-generated events
     });
     

9. clientX and clientY

   • Description: The horizontal (clientX) and vertical (clientY) coordinates of the mouse pointer relative to the viewport when the event was triggered.
   • Usage: Useful in mouse events to get the exact position of the cursor.
   • Example:

     document.addEventListener('click', function(event) {
       console.log('X: ' + event.clientX + ', Y: ' + event.clientY);
     });
     

10. key and keyCode

    • Description: For keyboard events, key returns the value of the key pressed (e.g., 'Enter', 'a'). keyCode is an older property that returns the numeric code of the key.
    • Usage: Essential for handling keyboard inputs.
    • Example:

      document.addEventListener('keydown', function(event) {
        console.log('Key pressed: ' + event.key); // Outputs: 'a', 'Enter', etc.
      });
      

11. which

    • Description: Similar to keyCode, it returns the numeric code of the key or button that was pressed.
    • Usage: Often used as a fallback for older browsers that don't support key or keyCode.
    • Example:

      document.addEventListener('keydown', function(event) {
        console.log('Key pressed (which): ' + event.which);
      });
      

12. altKey, ctrlKey, shiftKey, metaKey

    • Description: Boolean properties that indicate whether the respective modifier keys (Alt, Ctrl, Shift, Meta) were pressed when the event occurred.
    • Usage: Useful for detecting combinations like Ctrl+C, Alt+Click, etc.
    • Example:

      document.addEventListener('click', function(event) {
        if (event.altKey) {
          console.log('Alt key was pressed during the click.');
        }
      });
      

Example of Event Object in Use

Here’s an example that demonstrates several properties and methods of the Event object in action:

<!DOCTYPE html>
<html>
<head>
  <title>Event Object Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    const button = document.getElementById('myButton');

    button.addEventListener('click', function(event) {
      console.log('Event type:', event.type);             // 'click'
      console.log('Target element:', event.target);       // <button id="myButton">Click Me</button>
      console.log('Event bubbles:', event.bubbles);       // true
      console.log('Default prevented:', event.defaultPrevented); // false

      // Prevent default action (if any)
      event.preventDefault();

      console.log('Default prevented after preventDefault():', event.defaultPrevented); // true
    });
  </script>
</body>
</html>