The Event Object


When an event happens, JavaScript automatically creates an object that contains details about that event. This is called the event object.

The event object tells you what happened, where it happened, and how it happened. It gives you information such as which key was pressed, which mouse button was clicked, or which element triggered the event.

Understanding the event object helps developers write smarter and more interactive event-handling code.

What the Event Object Contains

  • type   – the name of the event
  • target – the element that triggered the event  
  • key    – which key was pressed (keyboard events)
  • clientX and clientY – mouse position 
  • preventDefault() – stops default browser behavior  

These properties help control how your application reacts to user actions.

This input field will be used to show how the event object works during user interaction.

Here, the event object is passed automatically to the function.

It tells us which key was pressed and what type of event occurred.

This example shows how the event object helps identify which element triggered the action.

By mastering the event object, students gain the ability to write intelligent and responsive event-handling logic for real-world JavaScript applications.