JavaScript Events

Common Events

The onclick event occurs when a user clicks on an HTML element. This is one of the most commonly used events for buttons, links, images, or any clickable element. Click events enable interactive features like submitting forms, toggling menus, opening modals, or triggering any action in response to user clicks.

The onload event fires when a page has finished loading all content, including images, scripts, and stylesheets. This event is attached to the window or body element and is useful for initializing JavaScript code that needs the full DOM to be ready. Modern code often uses DOMContentLoaded instead, which fires when just the HTML is loaded without waiting for stylesheets and images.

The onchange event occurs when the value of an input element changes and the element loses focus. This event is commonly used with form elements like text inputs, select dropdowns, checkboxes, and radio buttons. It's perfect for validating input, updating related fields, or triggering actions based on user selections.

The onmouseover event fires when the mouse pointer moves onto an element. This event enables hover effects, tooltips, dropdown menus, and other interactive features that respond to mouse movement. It's triggered when the cursor enters the element's boundaries, allowing you to create responsive visual feedback for users.

The onmouseout event occurs when the mouse pointer leaves an element's boundaries. This is the counterpart to onmouseover and is used to reverse hover effects, hide tooltips, close dropdowns, or clean up any changes made when the mouse entered. Together, onmouseover and onmouseout create complete hover interactions.

The onkeydown event fires when a user presses a key on the keyboard while an element has focus. This event is useful for keyboard shortcuts, form validation as users type, game controls, or any feature that responds to keyboard input. The event object contains information about which key was pressed, allowing you to respond differently to different keys.

// HTML onclick event
<button onclick="alert('Clicked!')">Click Me</button>

// JavaScript event handler
<button id="myBtn">Click Me</button>

<script>
document.getElementById("myBtn").onclick = function() {
  alert("Button was clicked!");
};
</script>

// addEventListener (recommended)
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  console.log("Button clicked!");
});

Event Listeners

The addEventListener() method is the modern, recommended way to attach event handlers to elements. It takes two main parameters: the event type (like "click", "load", "change") without the "on" prefix, and a function to execute when the event occurs. Unlike inline event attributes, addEventListener keeps JavaScript separate from HTML, following best practices for code organization.

Unlike older methods (like element.onclick = function), addEventListener() allows you to add multiple event handlers to the same event on the same element. Each handler will execute when the event fires. This is crucial when different parts of your code need to respond to the same event without overwriting each other's handlers. All attached handlers execute in the order they were added.

Using addEventListener() separates JavaScript code from HTML markup, adhering to the principle of separation of concerns. Instead of mixing JavaScript into HTML with onclick attributes, you keep all behavior in JavaScript files. This makes code more maintainable, easier to debug, and allows you to write more complex event handling logic without cluttering your HTML.

When an event fires, addEventListener() automatically passes an event object to the handler function. This event object contains detailed information about the event: what type it was, which element triggered it, mouse coordinates for click events, which key was pressed for keyboard events, and many other properties. Access this object by adding a parameter to your handler function: function(event) { }.

The removeEventListener() method removes event handlers that were added with addEventListener(). It takes the same parameters: the event type and the exact same function reference. This is why you cannot remove anonymous functions—you need a reference to the function to remove it. Event listener removal is important for preventing memory leaks in single-page applications where elements are dynamically created and destroyed.

// Add event listener
const button = document.getElementById("myBtn");

button.addEventListener("click", function(event) {
  console.log("Button clicked!");
  console.log("Event type:", event.type);
});

// Multiple listeners
button.addEventListener("click", firstFunction);
button.addEventListener("click", secondFunction);

function firstFunction() {
  console.log("First function");
}

function secondFunction() {
  console.log("Second function");
}

// Remove event listener
button.removeEventListener("click", firstFunction);