Mi az eseménymodell a böngészőben?

Felhasználói interakciók (kattintások, bevitel, hover) és rendszeresemények (oldal betöltése, hibák) kezelésének módszere a webböngészőben.

Fő fogalmak:

• Esemény: A megtörtént művelet.
• Eseménykezelő: Funkció, amely az esemény bekövetkeztekor fut le.
• Eseményobjektum (Event object): Átadódik a kezelőnek, és információkat tartalmaz az eseményről (típus, elem, koordináták stb.).

Az események szabványos folyamata:

1. Elfogás (Capturing): Az esemény a DOM legfelső elemétől (Window, Document) lefelé halad a cél elemig. Ebben a szakaszban a kezelők elsőként aktiválódnak.
2. Cél szakasz (Target phase): Az esemény eléri a cél elemet, ahol megtörtént.
3. Buborézás (Bubbling): Az esemény visszafelé halad a DOM-on keresztül a Window-ig. Ebben a szakaszban a kezelők a capture és target szakasz után aktiválódnak.

Handler-ek hozzáadása:

• HTML attribútumok (onclick, onload): Elavult módszer, nem ajánlott összetett alkalmazásokhoz.
• DOM elemek tulajdonságai (element.onclick): Csak egy handler rendelhető minden eseménytípushoz egy elemre.

  // Példa
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Gomb megnyomva!');
  };
  

• addEventListener módszer: Előnyben részesített módszer. Több handler hozzáadását teszi lehetővé ugyanarra az eseményre, és a kezelés fázisának (elfogás vagy buborézás) kontrollját.

  // Példa
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Kattintás a gombra!', event);
  }, false); // false - buborézás, true - elfogás
  

A removeEventListener módszerrel lehet eltávolítani a handler-eket.

Eseménydelegáció: Egy szülő elemhez csatolunk egy handler-t, hogy kezelje az alárendelt elemek eseményeit. Ez erőforrásokat takarít meg, és megkönnyíti a dinamikus tartalom kezelését.

// Delegáció példája
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Listaelemre kattintott:', event.target.textContent);
    }
});