Mis on sündmuste mudel brauseris?

Kasutaja interaktsioonide (klõpsud, sisestused, hiirega tõstetud) ja süsteemsete sündmuste (lehe laadimine, vead) töötlemise viis veebibrauseris.

Peamised kontseptsioonid:

• Sündmus: Toimus tegevus.
• Sündmuse töötleja: Funktsioon, mis täidetakse sündmuse ajal.
• Sündmuse objekt (Event object): Edastatakse töötlejale ja sisaldab teavet sündmuse kohta (tüüp, element, koordinaadid jne).

Standardne sündmuste voog:

1. Kogumine (Capturing phase): Sündmus laskub DOM kõrgeimast elemendist (Window, Document) sihtelemendini. Selle etapi töötlejad käivitatakse esimesena.
2. Sihtfaas (Target phase): Sündmus jõuab sihtelemendini - elemendini, kus see toimus.
3. Väljalangemine (Bubbling phase): Sündmus tõuseb sihtelemendist tagasi DOM puu kaudu Window-ni. Selle etapi töötlejad käivitatakse pärast kogumise ja sihtfaasi.

Töötlejate lisamine:

• HTML atribuudid (onclick, onload): vananenud meetod, ei soovitata keerukate rakenduste jaoks.
• DOM elementide omadused (element.onclick): saab määrata ainult ühe töötleja iga sündmuse tüübi jaoks.

  // Näide
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Nuppu on vajutatud!');
  };
  

• Meetod addEventListener: eelistatud viis. võimaldab lisada mitu töötlejat ühe sündmuse jaoks ja kontrollida faasi (kogumine või väljalangemine):

  // Näide
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klõps nupul!', event);
  }, false); // false - väljalangemine, true - kogumine
  

Meetod removeEventListener kasutatakse töötlejate eemaldamiseks:

Sündmuste delegatsioon:

• Ühe töötleja ühendamine vanemelemendiga, et töödelda lasteelementide sündmusi:

// Delegatsiooni näide
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Loendi element:', event.target.textContent);
    }
});