Dobre praktyki przy obsłudze wydarzeń

Kluczowe zasady dla efektywnego i bezpiecznego zarządzania wydarzeniami w aplikacjach JavaScript.

Zasady dobrego kodu

1// 1. Zawsze sprawdzaj, czy element istnieje
2const button = document.getElementById('my-button');
3if (button) {
4  button.addEventListener('click', handleClick);
5} else {
6  console.warn('Przycisk o ID "my-button" nie został znaleziony');
7}
8
9// 2. Używaj delegacji dla dynamicznych elementów
10const parent = document.getElementById('dynamic-content');
11parent.addEventListener('click', (e) => {
12  if (e.target.matches('.dynamic-button')) {
13    handleDynamicButtonClick(e);
14  }
15});
16
17// 3. Pamiętaj o czyszczeniu event listenerów
18class ParkComponent {
19  constructor(element) {
20    this.element = element;
21    this.handleClick = this.handleClick.bind(this);
22    this.init();
23  }
24
25  init() {
26    this.element.addEventListener('click', this.handleClick);
27  }
28
29  handleClick(e) {
30    console.log('Kliknięto komponent parku');
31  }
32
33  destroy() {
34    this.element.removeEventListener('click', this.handleClick);
35  }
36}
37
38// 4. Używaj preventDefault() świadomie
39const form = document.getElementById('contact-form');
40form.addEventListener('submit', (e) => {
41  e.preventDefault(); // Zatrzymuje standardowe wysłanie formularza
42
43  // Własna logika walidacji i wysyłania
44  if (validateForm()) {
45    submitFormAjax();
46  }
47});