DOM Event Listener
Advanced event handling with addEventListener
🎧 What is addEventListener?
addEventListener() is the modern way to handle events in JavaScript. It's more powerful than onclick because you can add multiple listeners to the same element and control how events behave.
// Modern event listener
element.addEventListener('click', function() {
console.log('Button clicked!');
});
Try it:
addEventListener Features
Multiple Listeners
Add many listeners to one element
element.addEventListener('click', func1);
element.addEventListener('click', func2);Remove Listeners
Clean up event listeners
element.removeEventListener('click', func);Options Control
Control event behavior
element.addEventListener('click', func, {
once: true, capture: true
});Event Bubbling
Control event propagation
event.stopPropagation();🔹 Basic addEventListener Syntax
The standard way to add event listeners:
// Basic syntax
element.addEventListener(event, function, options);
// Example with click event
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
// With arrow function
button.addEventListener('click', () => {
console.log('Arrow function clicked!');
});
// With named function
function handleClick() {
alert('Named function clicked!');
}
button.addEventListener('click', handleClick);Output:
🔹 Multiple Event Listeners
Add multiple functions to the same event:
const button = document.getElementById('multiButton');
// First listener
button.addEventListener('click', function() {
console.log('First listener executed');
});
// Second listener
button.addEventListener('click', function() {
console.log('Second listener executed');
});
// Third listener
button.addEventListener('click', function() {
alert('All three listeners work!');
});
// All three functions will run when clicked!Output:
Click the button to see multiple listeners in action
🔹 Removing Event Listeners
Clean up listeners when you don't need them:
const button = document.getElementById('removeButton');
// Named function (required for removal)
function clickHandler() {
alert('This listener will be removed!');
// Remove itself after first click
button.removeEventListener('click', clickHandler);
button.textContent = 'Listener Removed';
button.style.backgroundColor = 'gray';
}
// Add the listener
button.addEventListener('click', clickHandler);
// Note: You can only remove named functions, not anonymous ones!Output:
🔹 Event Listener Options
Control how event listeners behave:
const button = document.getElementById('optionsButton');
// Option 1: once - listener runs only once
button.addEventListener('click', function() {
alert('This will only run once!');
}, { once: true });
// Option 2: passive - improves performance
button.addEventListener('scroll', function() {
console.log('Passive scroll listener');
}, { passive: true });
// Option 3: capture - runs during capture phase
button.addEventListener('click', function() {
console.log('Capture phase');
}, { capture: true });
// Multiple options
button.addEventListener('click', function() {
console.log('Once and capture');
}, {
once: true,
capture: true
});Output:
🔹 Event Bubbling and Capturing
Understanding how events travel through the DOM:
// HTML: <div id="parent"><button id="child">Click</button></div>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// Bubbling (default) - child first, then parent
child.addEventListener('click', function() {
console.log('Child clicked (bubbling)');
});
parent.addEventListener('click', function() {
console.log('Parent clicked (bubbling)');
});
// Capturing - parent first, then child
parent.addEventListener('click', function() {
console.log('Parent clicked (capturing)');
}, { capture: true });
// Stop propagation
child.addEventListener('click', function(event) {
event.stopPropagation(); // Stops bubbling
console.log('Event stopped here');
});Output:
Parent Div
Click the button to see event bubbling