Removing Event Listeners and Memory Cleanup

Sometimes we need to remove event listeners so they don't occupy memory or so they stop responding to events. It's like shutting down unnecessary alarm systems in the park.

Proper Event Listener Management

1// Function to handle clicks
2function handleEmergencyClick() {
3  console.log('Activating emergency protocol!');
4  evacuatePark();
5}
6
7const emergencyButton = document.getElementById('emergency-btn');
8
9// Adding an event listener
10emergencyButton.addEventListener('click', handleEmergencyClick);
11
12// Removing an event listener (must be the same function!)
13emergencyButton.removeEventListener('click', handleEmergencyClick);
14
15// Example with a temporary event listener
16function temporaryEventHandler() {
17  console.log('This event listener will be active for only 10 seconds');
18}
19
20const tempButton = document.getElementById('temp-button');
21tempButton.addEventListener('click', temporaryEventHandler);
22
23// Automatic removal after 10 seconds
24setTimeout(() => {
25  tempButton.removeEventListener('click', temporaryEventHandler);
26  console.log('Event listener has been removed');
27}, 10000);