Čo je to model udalostí v prehliadači?

Spôsob spracovania interakcií používateľa (kliknutia, zadávanie, naťahovanie) a systémových udalostí (nahrávanie stránky, chyby v prehliadači).

Hlavné koncepty:

• Udalosť: Akcia, ktorá sa stala.
• Spracovateľ udalosti: Funkcia, ktorá sa vykoná pri udalosti.
• Objekt udalosti (Event object): Odovzdáva sa spracovateľovi a obsahuje informácie o udalosti (typ, prvok, súradnice atď.).

Štandardný tok udalostí:

1. Zachytávanie (Capturing phase): Udalosť prechádza od najvrchnejšieho prvku DOM (Window, Document) k cieľovému prvku. Spracovatelia v tejto fáze sa spúšťajú ako prvé.
2. Fáza cieľa (Target phase): Udalosť dosiahne cieľový prvok - prvok, kde sa udalosť stala.
3. Vypúšťanie (Bubbling phase): Udalosť stúpa od cieľového prvku späť po DOM strome k Window. Spracovatelia v tejto fáze sa spúšťajú po fáze zachytávania a cieľa.

Pridanie spracovateľov:

• Atribúty HTML (onclick, onload): Zastaralý spôsob, neodporúča sa pre zložité aplikácie.
• Vlastnosti prvkov DOM (element.onclick): Môžete priradiť iba jedného spracovateľa na každý typ udalosti pre prvok.

  // Príklad
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Stlačené tlačidlo!');
  };
  

• Metóda addEventListener: Preferovaný spôsob. Umožňuje pridávať viacero spracovateľov pre jednu udalosť a kontrolovať fázu spracovania (zachytávanie alebo vypúšťanie).

  // Príklad
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klik na tlačidlo!', event);
  }, false); // false - vypúšťanie, true - zachytávanie
  

Metóda removeEventListener sa používa na odstránenie spracovateľov.

Delegovanie udalostí (Event delegation): Pripojenie jedného spracovateľa k rodičovskému prvku na spracovanie udalostí od potomkov. Šetrí zdroje a zjednodušuje prácu s dynamickým obsahom.

// Príklad delegovania
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Klik na prvok zoznamu:', event.target.textContent);
    }
});