addEventListener() and the Event Object

Syntax

element.addEventListener("event", callback)

Examples

const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  console.log("Button clicked!");
  console.log("Target:", event.target);
});

const form = document.querySelector("#myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // stops the page from reloading
  console.log("Form submitted via JavaScript instead");
});

function handleClick() {
  console.log("Clicked!");
}

const button = document.querySelector("#myButton");
button.addEventListener("click", handleClick);

// Later, stop listening - requires the SAME function reference
button.removeEventListener("click", handleClick);

// Anonymous functions cannot be removed this way, since a new reference is created each time

Best practices

• Use addEventListener() instead of inline onclick= attributes or element.onclick = - it allows multiple listeners and cleaner separation of HTML and JavaScript
• Keep a reference to named functions if you need to remove a listener later - removeEventListener() requires the exact same function reference
• Call event.preventDefault() when you want to override default browser behavior, like a form submitting and reloading the page
• Remove event listeners on elements that get removed from the DOM to avoid memory leaks in long-running applications

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation