Kas yra įvykių modelis naršyklėje?

Būdo apdoroti naudotojo sąveikas (paspaudimus, įvedimus, užvedimus) ir sisteminius įvykius (pagrindinio puslapio įkėlimą, klaidas) žiniatinklio naršyklėje.

Pagrindinės sąvokos:

• Įvykis: Veiksmas, kuris įvyko.
• Įvykio tvarkytojas: Funkcija, kuri vykdoma įvykio metu.
• Įvykio objektas (Event object): perduodamas tvarkytojui ir turi informaciją apie įvykį (tipas, elementas, koordinatės ir kt.).

Standartinis įvykių srautas:

1. Gaudymas (Capturing phase): Įvykis nusileidžia nuo aukščiausio DOM elemento (Window, Document) iki tikslo elemento. Šio etapo tvarkytojai vykdomi pirmieji.
2. Tikslo fazė (Target phase): Įvykis pasiekia tikslinį elementą - tą, kuriame įvyko.
3. Skylimas (Bubbling phase): Įvykis kyla nuo tikslo elemento atgal per DOM medį iki Window. Šio etapo tvarkytojai vykdomi po gaudymo ir tikslo fazės.

Tvarkytojų pridėjimas:

• HTML atributai (onclick, onload): pasenęs būdas, nerekomenduojama sudėtingoms programėlėms.
• DOM elementų savybės (element.onclick): galima priskirti tik vieną tvarkytoją kiekvienam įvykio tipui elementui.

  // Pavyzdys
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Paspaustas mygtukas!');
  };
  

• addEventListener metodas: pageidaujamas būdas. leidžia pridėti kelis tvarkytojus vienai įvykiui ir kontroliuoti fazą (gaudymą ar skylimą):

  // Pavyzdys
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Paspaudimas ant mygtuko!', event);
  }, false); // false - skylimas, true - gaudymas
  

removeEventListener metodas naudojamas tvarkytojų pašalinimui:

Įvykių delegavimas:

• Vieno tvarkytojo priskyrimas tėviniam elementui, kad apdorotų vaikų elementų įvykius:

// Delegavimo pavyzdys
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Sąrašo elementas:', event.target.textContent);
    }
});