Kas ir notikumu modelis pārlūkprogrammā?

Veids, kā apstrādāt lietotāja mijiedarbību (klikšķus, ievades, novietojumus) un sistēmas notikumus (lapas ielādi, kļūdas tīmekļa pārlūkprogrammā).

Galvenās koncepcijas:

• Notikums: Darbība, kas notikusi.
• Notikuma apstrādātājs: Funkcija, kas tiek izpildīta notikuma laikā.
• Notikuma objekts (Event object): Nodod notikuma apstrādātājam un satur informāciju par notikumu (tips, elements, koordinātas utt.).

Standarta notikumu plūsma:

1. Noķeršana (Capturing phase): Notikums nokrīt no visaugstākā DOM elementa (Window, Document) līdz mērķa elementam. Šajā posmā apstrādātāji tiek izpildīti pirmie.
2. Mērķa fāze (Target phase): Notikums sasniedz mērķa elementu - to elementu, kur notikums notika.
3. Izlīšana (Bubbling phase): Notikums paceļas no mērķa elementa atpakaļ pa DOM koku līdz Window. Šajā posmā apstrādātāji tiek izpildīti pēc noķeršanas un mērķa fāzes.

Apstrādātāju pievienošana:

• HTML atribūti (onclick, onload): novecojis veids, neiesaka sarežģītām lietojumprogrammām.
• DOM elementu īpašības (element.onclick): var piešķirt tikai vienu apstrādātāju katram notikuma tipam elementam.

  // Piemērs
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Nospiežot pogu!');
  };
  

• Metode addEventListener: vēlams veids. ļauj pievienot vairākus apstrādātājus vienam notikumam un kontrolēt fāzi (noķeršanu vai izlīšanu):

  // Piemērs
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klikšķis uz pogas!', event);
  }, false); // false - izlīšana, true - noķeršana
  

Metode removeEventListener tiek izmantota apstrādātāju noņemšanai:

Notikumu deleģēšana:

• Viena apstrādātāja pievienošana vecāku elementam, lai apstrādātu bērnu elementu notikumus:

// Deleģēšanas piemērs
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Saraksta elements:', event.target.textContent);
    }
});