Co je to model událostí v prohlížeči?

Metoda pro zpracování interakcí uživatele (kliknutí, zadávání, najetí myší) a systémových událostí (načtení stránky, chyby) v webovém prohlížeči.

Hlavní koncepty:

• Událost: Akce, která se stala.
• Obslužná funkce události: Funkce, která se spustí při vzniku události.
• Objekt události (Event object): Předává se obslužné funkci a obsahuje informace o události (typ, prvek, souřadnice atd.).

Standardní tok událostí:

1. Zachycení (Capturing): Událost klesá z nejvyššího prvku DOM (Window, Document) k cílovému prvku. Obslužné funkce v této fázi se spouštějí první.
2. Fáze cíle (Target phase): Událost dosáhne cílového prvku, kde se stala.
3. Bublání (Bubbling): Událost stoupá od cílového prvku zpět přes strom DOM k Window. Obslužné funkce v této fázi se spouštějí po fázi zachycení a cíle.

Přidání obslužných funkcí:

• HTML atributy (onclick, onload): Zastaralá metoda, nedoporučuje se pro složité aplikace.
• Vlastnosti prvků DOM (element.onclick): Lze přiřadit pouze jeden obslužník na každý typ události pro prvek.

  // Příklad
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Stisknuto tlačítko!');
  };
  

• Metoda addEventListener: Preferovaná metoda. Umožňuje přidat více obslužníků pro jednu událost a kontrolovat fázi zpracování (zachycení nebo bublání).

  // Příklad
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klik na tlačítko!', event);
  }, false); // false - bublání, true - zachycení
  

Metoda removeEventListener se používá k odstranění obslužníků.

Delegace událostí: Připojení jednoho obslužníku k rodičovskému prvku pro zpracování událostí z podřízených prvků. Šetří zdroje a zjednodušuje práci s dynamickým obsahem.

// Příklad delegace
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Klik na prvek seznamu:', event.target.textContent);
    }
});