Ce este modelul de evenimente în browser?

Metoda de gestionare a interacțiunilor utilizatorului (clicuri, introducere, hover) și evenimentele sistemului (încărcarea paginii, erori) în browserul web.

Concepte principale:

• Eveniment: Acțiunea care a avut loc.
• Handler de eveniment: Funcție care se execută la apariția evenimentului.
• Obiectul eveniment (Event object): Transmis către handler și conține informații despre eveniment (tip, element, coordonate etc.).

Fluxul standard al evenimentelor:

1. Capturare (Faza de captare): Evenimentul coboară de la cel mai înalt element DOM (Window, Document) către elementul țintă. Handler-ele din această fază se activează primele.
2. Faza țintă (Target phase): Evenimentul ajunge la elementul țintă unde s-a produs.
3. Bubbling (Faza de bubbling): Evenimentul se ridică de la elementul țintă înapoi prin DOM către Window. Handler-ele din această fază se activează după faza de captare și țintă.

Adăugarea handler-elor:

• Atribute HTML (onclick, onload): Metodă învechită, nerecomandată pentru aplicații complexe.
• Proprietăți ale elementelor DOM (element.onclick): Se poate atribui un singur handler pentru fiecare tip de eveniment pentru un element.

  // Exemplu
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Buton apăsat!');
  };
  

• Metoda addEventListener: Metoda preferată. Permite adăugarea mai multor handler-e pentru un eveniment și controlul fazei de gestionare (captare sau bubbling).

  // Exemplu
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Click pe buton!', event);
  }, false); // false - bubbling, true - captare
  

Metoda removeEventListener se folosește pentru a elimina handler-ii.

Delegarea evenimentelor: Atașarea unui handler la un element părinte pentru a gestiona evenimentele de la elementele copil. Economisește resurse și simplifică lucrul cu conținut dinamic.

// Exemplu de delegare
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Click pe elementul de listă:', event.target.textContent);
    }
});