Usuwanie event listenerów i czyszczenie pamięci

Czasami musimy usunąć event listenery, żeby nie zajmowały pamięci lub żeby przestały reagować na wydarzenia. To jak wyłączanie niepotrzebnych systemów alarmowych w parku.

Właściwe zarządzanie event listenerami

1// Funkcja do obsługi kliknięć
2function handleEmergencyClick() {
3  console.log('Aktywacja protokołu awaryjnego!');
4  evacuatePark();
5}
6
7const emergencyButton = document.getElementById('emergency-btn');
8
9// Dodanie event listenera
10emergencyButton.addEventListener('click', handleEmergencyClick);
11
12// Usunięcie event listenera (musi być ta sama funkcja!)
13emergencyButton.removeEventListener('click', handleEmergencyClick);
14
15// Przykład z czasowym event listenerem
16function temporaryEventHandler() {
17  console.log('Ten event listener będzie aktywny tylko przez 10 sekund');
18}
19
20const tempButton = document.getElementById('temp-button');
21tempButton.addEventListener('click', temporaryEventHandler);
22
23// Automatyczne usunięcie po 10 sekundach
24setTimeout(() => {
25  tempButton.removeEventListener('click', temporaryEventHandler);
26  console.log('Event listener został usunięty');
27}, 10000);