DOM Event Listener
The addEventListener() method in JavaScript is a core feature of the HTML DOM that allows developers to attach event handlers to HTML elements. It makes web pages interactive, enabling dynamic responses to user actions (clicks, typing, hovering) and browser events (page load, scroll, resize).
Syntax:
element.addEventListener(event, handler, options);
- event — Name of the event (e.g.,
"click","input","submit"). - handler — Function executed when the event occurs. Receives an event object.
- options (optional) — Object controlling event behavior:
capture: true→ Use capturing phase.once: true→ Listener runs once and removes itself automatically.passive: true→ Improves performance for scroll/touch events by preventingpreventDefault().
Basic Example:
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Button clicked!");
});
</script>
Advantages of addEventListener()
- Attach multiple listeners to the same element/event.
- Control event phases (bubbling vs capturing).
- Keep JavaScript logic separate from HTML (better for maintainability).
- Modern, recommended over inline event attributes (e.g.,
onclick) or DOM properties.
Event Object
The event object provides details about the triggered event.
button.addEventListener("click", (event) => {
console.log("Event type:", event.type); // click
console.log("Clicked element:", event.target); // button element
event.preventDefault(); // Prevent default action
event.stopPropagation(); // Stop bubbling/capturing
});
Common Properties & Methods:
| Property / Method | Description |
|---|---|
event.target | Element that triggered the event |
event.type | Type of event (click, input, etc.) |
event.preventDefault() | Prevents default browser action |
event.stopPropagation() | Stops event from bubbling/capturing |
Common Event Types
- Mouse Events:
click,dblclick,mouseover,mouseout,mousemove,mousedown,mouseup - Keyboard Events:
keydown,keyup,keypress - Form Events:
submit,input,change,focus,blur,reset - Window/Document Events:
load,resize,scroll,unload - Clipboard Events:
copy,paste,cut - Drag & Drop:
drag,drop,dragstart,dragover,dragenter,dragleave,dragend - Touch & Pointer Events:
touchstart,touchmove,touchend,pointerdown,pointerup,pointermove
Practical Examples
Multiple Events on One Element
const input = document.querySelector("input");
input.addEventListener("focus", () => input.style.border = "2px solid blue");
input.addEventListener("blur", () => input.style.border = "1px solid gray");
input.addEventListener("input", (e) => console.log("Typing:", e.target.value));
Form Handling & Validation
<form id="myForm">
<input id="username" type="text" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
const input = document.getElementById("username");
form.addEventListener("submit", (event) => {
event.preventDefault();
if(input.value.length < 3) {
input.classList.add("error");
console.log("Username too short!");
} else {
input.classList.remove("error");
console.log("Form submitted:", input.value);
}
});
input.addEventListener("input", (event) => {
if(event.target.value.length >= 3) {
input.classList.add("valid");
input.classList.remove("error");
} else {
input.classList.remove("valid");
input.classList.add("error");
}
}, { passive: true });
</script>
Event Delegation
const list = document.getElementById("list");
list.addEventListener("click", (event) => {
if(event.target.tagName === "LI") {
console.log("Clicked:", event.target.textContent);
}
});
Removing Event Listeners
In JavaScript, addEventListener lets elements respond to user actions like clicks or typing. removeEventListener is used to stop these responses, prevent memory leaks, or control dynamic behavior.
function handleClick() { console.log("Clicked!"); }
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick); // Works only with named/stored functions