JavaScript Event Handling Patterns

Event handling patterns define how and where you attach event listeners to respond to user interactions or system actions. Understanding these patterns helps you write cleaner, more efficient, and scalable code — especially for dynamic or large applications.

Let’s go through the main event handling patterns one by one -

1. Inline Event Handling (HTML Event Handlers)

In this pattern, the event is defined directly in the HTML element using an event attribute like onclick, onchange, etc.

Example:

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
  console.log("Button clicked!");
}
</script>

2. DOM Property Event Handling

You assign an event handler directly to a DOM element’s event property in JavaScript.

Example:

const btn = document.getElementById("myBtn");
btn.onclick = function () {
  console.log("Clicked via property");
};

3. addEventListener() Method (Modern & Preferred)

The most flexible and widely used method.

It allows multiple event listeners on the same element and supports capture/bubble control.

Example:

const btn = document.getElementById("myBtn");

btn.addEventListener("click", () => console.log("First Handler"));
btn.addEventListener("click", () => console.log("Second Handler"));

4. Event Delegation

A performance-optimized pattern that uses event bubbling.

Instead of adding listeners to multiple child elements, you attach one listener to a common parent and check which child triggered the event.

Example:

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
document.getElementById("menu").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("Clicked:", event.target.textContent);
  }
});
</script>

5. Event Object & Handler Reuse

You can use the event object (event or e) for details about the event (like key pressed, mouse position, etc.) and reuse handlers for multiple elements.

Example:

function handleClick(event) {
  console.log("Clicked element:", event.target.id);
}

document.getElementById("btn1").addEventListener("click", handleClick);
document.getElementById("btn2").addEventListener("click", handleClick);

6. Removing Event Handlers

You can remove an event listener when it’s no longer needed — helps avoid memory leaks.

Example:

function showMessage() {
  console.log("Clicked once!");
  button.removeEventListener("click", showMessage);
}

const button = document.getElementById("btn");
button.addEventListener("click", showMessage);

7. Passive Event Listeners (Performance Tip)

Used mainly for scroll or touch events to improve performance.

Tells the browser that the handler won’t call preventDefault(), allowing faster scrolling.

Example:

window.addEventListener("scroll", () => {
  console.log("Scrolling");
}, { passive: true });