Handling Browser Events in JS: addEventListener and removeEventListener
Handling browser events in JavaScript typically involves using
addEventListener to register an event handler and
removeEventListener to unregister it when no longer needed.
JavaScript provides a robust way to handle browser events like clicks, form
submissions, keyboard presses, and more. The two main tools for this are:
addEventListener
removeEventListener
What is addEventListener?
The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.
Syntax:-
element.addEventListener(event, handler, options);
Example:-
<button id="myBtn">Click Me</button>
<script>
const btn = document.getElementById('myBtn');
function sayHello() {
alert('Hello!');
}
btn.addEventListener('click', sayHello);
</script>
How to Remove an Event Listener with removeEventListener
To remove a previously attached event, use removeEventListener().
Important: You must reference the same function object that was passed to addEventListener.
Syntax:-
element.removeEventListener(event, handler, options);
Example:-
<button id="start">Start</button>
<button id="stop">Stop</button>
<script>
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
function logMessage() {
console.log('Button clicked!');
}
startBtn.addEventListener('click', logMessage);
stopBtn.addEventListener('click', () => {
startBtn.removeEventListener('click', logMessage);
console.log('Listener removed.');
});
</script>