learn2kode.in

Menu

JavaScript Tutorial

Menu

JavaScript Events – Complete Beginner Tutorial

What Are JavaScript Events?

JavaScript events are actions or occurrences that happen in the browser and can be detected using JavaScript. These events allow you to make web pages interactive by responding to user actions such as clicks, typing, scrolling, or form submissions.
In simple words, events help JavaScript “listen” and react to user behavior. Common examples of events include:
  • Clicking a button
  • Typing in an input field
  • Submitting a form
  • Moving the mouse
  • Loading a web page
Understanding JavaScript events is essential before learning React, Vue, or any modern frontend framework.

Why JavaScript Events Are Important

JavaScript events are the foundation of interactive web applications. They allow you to:
  • Build dynamic user interfaces
  • Handle user inputs
  • Validate forms
  • Create animations
  • Trigger API calls
  • Improve user experience
Almost every modern website depends on event-driven programming.

Common JavaScript Event Types

Mouse Events
Mouse events are triggered when users interact with the mouse.
Examples:
  • click
  • dblclick
  • mouseover
  • mouseout
  • mousemove
Copy Text 
button.addEventListener("click", function () {
  alert("Button clicked!");
});
Keyboard Events
Keyboard events fire when users press keys.
Examples:
  • keydown
  • keyup
  • keypress
Copy Text 
document.addEventListener("keydown", function (event) {
  console.log(event.key);
});
Form Events
Form events are used when handling inputs and forms.
Examples:
  • submit
  • change
  • focus
  • blur
  • input
Copy Text 
form.addEventListener("submit", function (e) {
  e.preventDefault();
  console.log("Form submitted");
});
Window & Page Events
These events occur on the browser window or document.
Examples:
  • load
  • resize
  • scroll
Copy Text 
window.addEventListener("scroll", function () {
  console.log("Page scrolling");
});

How JavaScript Events Work

JavaScript follows an event-driven model:

  • An event occurs (user action)
  • JavaScript detects the event
  • An event handler function runs
  • Code executes based on the event
This makes websites responsive and interactive.

Event Handlers in JavaScript

An event handler is a function that runs when an event occurs.
Inline Event Handler (Not Recommended)
Copy Text 
<button onclick="alert('Clicked')">Click</button>
❌ Avoid inline handlers because they mix HTML and JavaScript.
Using addEventListener (Recommended)
Copy Text 
button.addEventListener("click", function () {
  alert("Clicked using addEventListener");
});
✅ This method is clean, flexible, and used in modern JavaScript and React.

Event Object

When an event happens, JavaScript automatically creates an event object.
Copy Text 
button.addEventListener("click", function (event) {
  console.log(event.target);
});
The event object provides useful information like:
  • Which element was clicked
  • Which key was pressed
  • Mouse position

Event Bubbling and Capturing (Basic Idea)

JavaScript events move through the DOM in two phases:
  • Bubbling (default): child → parent
  • Capturing: parent → child
Copy Text 
element.addEventListener("click", handler, true); // capturing
You don’t need deep knowledge now, but React uses this concept internally.

JavaScript Events and React

If you plan to learn React, JavaScript events are extremely important because:
  • React uses synthetic events
  • Event handling syntax is similar
  • Concepts like onClick, onChange, and onSubmit come directly from JavaScript events
Learning JavaScript events makes React much easier.

Best Practices for JavaScript Events

  • Always use addEventListener
  • Avoid inline event handlers
  • Keep event logic inside functions
  • Remove unused event listeners when not needed
  • Use event delegation for performance

Real-World Use Cases

  • Button click actions
  • Form validation
  • Interactive menus
  • Modals and popups
  • Games and animations
  • API calls on user action
JavaScript Import / Export
JavaScript Mouse Events