Šta je model događaja u pretraživaču?

Metod za upravljanje interakcijama korisnika (klikovi, unos, hover) i sistemskim događajima (učitavanje stranice, greške) u veb pregledaču.

Glavni koncepti:

• Događaj: Akcija koja se dogodila.
• Rukovalac događaja: Funkcija koja se izvršava pri pojavi događaja.
• Objekat događaja (Event object): Prosleđuje se rukovaocu i sadrži informacije o događaju (tip, element, koordinate itd.).

Standardni tok događaja:

1. Hvatanje (Capturing): Događaj se spušta od najvišeg elementa DOM-a (Window, Document) do ciljnog elementa. Rukovaoci u ovoj fazi se aktiviraju prvi.
2. Faza cilja (Target phase): Događaj stiže do ciljnog elementa gde se dogodio.
3. Bubbling (Bubbling faza): Događaj se uzdiže od ciljnog elementa nazad kroz DOM do Window. Rukovaoci u ovoj fazi se aktiviraju nakon faze hvatanja i cilja.

Dodavanje rukovalaca:

• HTML atributi (onclick, onload): Zastarela metoda, ne preporučuje se za složene aplikacije.
• Svojstva DOM elemenata (element.onclick): Može se dodeliti samo jedan rukovalac za svaki tip događaja za element.

  // Primer
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Pritisnuto dugme!');
  };
  

• Metod addEventListener: Preferirani način. Omogućava dodavanje više rukovalaca za jedan događaj i kontrolu faze obrade (hvatanje ili bubbling).

  // Primer
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klik na dugme!', event);
  }, false); // false - bubbling, true - hvatanje
  

Metod removeEventListener se koristi za uklanjanje rukovalaca.

Delegacija događaja: Dodavanje jednog rukovaoca roditeljskom elementu za obradu događaja od decom. Štedi resurse i pojednostavljuje rad sa dinamičkim sadržajem.

// Primer delegacije
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Klik na element liste:', event.target.textContent);
    }
});