JAVASCRIPT
Add and Remove Individual Event Listeners
Understand how to attach and detach event listeners to specific DOM elements in JavaScript, enabling interactive responses to user actions like clicks or mouseovers.
const myButton = document.getElementById('myClickButton');
const messageDiv = document.getElementById('messageDisplay');
function handleClick() {
messageDiv.textContent = 'Button clicked!';
console.log('Button was clicked!');
}
// Add an event listener
myButton.addEventListener('click', handleClick);
// --- Later, perhaps based on some condition, you might remove it ---
const removeButton = document.getElementById('removeListenerButton');
if (removeButton) {
removeButton.addEventListener('click', () => {
myButton.removeEventListener('click', handleClick);
messageDiv.textContent = 'Click listener removed from button.';
console.log('Click listener removed.');
});
}
// Example HTML setup (not part of snippet, but for context):
// <button id="myClickButton">Click Me</button>
// <p id="messageDisplay">No click yet.</p>
// <button id="removeListenerButton">Remove Click Listener</button>
How it works: This snippet illustrates the fundamental process of adding and removing event listeners for specific DOM elements. `addEventListener()` attaches a function to be executed when a specified event (like 'click') occurs on the element. `removeEventListener()` is crucial for cleaning up listeners, especially in single-page applications or when an element or listener is no longer needed, preventing memory leaks and unintended behavior. Note that `removeEventListener` requires the *same* function reference that was passed to `addEventListener`.