The Event Object

In JavaScript, when an event occurs (like a click, key press, or mouse movement), the browser creates an Event Object that contains details about that event. This object is automatically passed to the event handler function and allows you to respond dynamically based on the event's specifics.

Common Properties of the Event Object

• type: The type of event (e.g., "click", "keydown").
• target: The DOM element that triggered the event.
• currentTarget: The element the event listener is attached to.
• preventDefault(): A method to stop the default browser action.
• stopPropagation(): A method to stop event bubbling up the DOM tree.
• clientX and clientY: Mouse coordinates relative to the viewport.
• key: The key value from keyboard events.

Using the Event Object in an Event Listener

When adding an event listener, include a parameter to receive the event object:

button.addEventListener('click', function(event) {
  console.log('Clicked element:', event.target);
  console.log('Event type:', event.type);
});

Here, the event parameter gives access to details about the click event, such as which element was clicked.

Preventing Default Behavior

Some events have default actions (like submitting a form or following a link). You can prevent these defaults using event.preventDefault().

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Stops form from submitting
  alert('Form submission prevented!');
});

Stopping Event Propagation

Events bubble up through parent elements by default. Use event.stopPropagation() to stop this behavior when needed.

childElement.addEventListener('click', function(event) {
  event.stopPropagation(); // Prevents parent handlers from running
  console.log('Child clicked');
});

parentElement.addEventListener('click', function() {
  console.log('Parent clicked');
});

Summary

• The Event Object provides essential details about user interactions.
• It is passed automatically to event handlers as the first argument.
• Commonly used properties include type, target, and methods like preventDefault().
• Controlling event flow and default actions helps create interactive, user-friendly interfaces.