Cum sa gestionezi evenimente in JavaScript

In this tutorial, you'll learn about Cum sa gestionezi evenimente in JavaScript. We cover key concepts, practical examples, and best practices.

Evenimentele sunt actiuni care au loc in browser -- click-uri, tastari, incarcari. Acest ghid iti arata cum sa le gestionezi eficient cu addEventListener si event delegation.

Quick Fix

1. Adaugarea unui event listener

Foloseste addEventListener() in loc de onclick:

const button = document.querySelector('#myButton');

button.addEventListener('click', (event) => {
    console.log('Buton apasat!');
    console.log('Tip eveniment:', event.type);
    console.log('Element tinta:', event.target);
});

2. Eliminarea unui event listener

Pentru a elimina, functia trebuie sa fie numita:

function handleClick(event) {
    console.log('Clicked');
    button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);
// Dupa primul click, listener-ul este eliminat

3. Event delegation

Delegarea atribuie un singur listener unui parinte pentru multiple elemente copil:

const list = document.querySelector('#todoList');

list.addEventListener('click', (event) => {
    const item = event.target.closest('li');
    if (!item) return;

    if (event.target.classList.contains('delete-btn')) {
        item.remove();
        console.log('Scos:', item.textContent);
    } else if (event.target.classList.contains('done-btn')) {
        item.classList.toggle('completed');
    }
});

4. Oprirea propagarii

Evenimentele se propaga de la element la radacina (bubbling):

document.querySelector('#parent').addEventListener('click', () => {
    console.log('Parent clicked');
});

document.querySelector('#child').addEventListener('click', (event) => {
    event.stopPropagation(); // Opreste propagarea
    console.log('Child clicked');
});

// Apasand pe child, se afiseaza doar "Child clicked"

5. Prevent default

Pentru a anula comportamentul implicit:

document.querySelector('a.no-nav').addEventListener('click', (event) => {
    event.preventDefault();
    console.log('Navigare blocata');
});

document.querySelector('#form').addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    console.log('Formular trimis fara reincarcare');
});

6. Once si passive options

Optiuni utile pentru performanta:

// Se declanseaza o singura data
button.addEventListener('click', handleFirstClick, { once: true });

// Nu sunteaza preventDefault (pentru scroll performance)
window.addEventListener('scroll', handleScroll, { passive: true });

Prevention

• Foloseste event delegation pentru liste dinamice cu multe elemente Adauga elemente noi in DOM prin appendChild() sau insertAdjacentHTML() si lasa delegarea sa gestioneze evenimentele
• Foloseste passive: true pentru evenimente de scroll/touch pentru performanta
• Nu folosi onclick in HTML -- mentine separarea dintre markup si logica

Common Mistakes

1. A adauga listeneri in bucle -- pentru liste, foloseste delegare in loc de un listener per element
2. A uita sa cureti listeneri -- in aplicatii SPA, listenerii necuratati cauzeaza memory leaks
3. A confunda event.target cu event.currentTarget -- target este elementul care a declansat evenimentul, currentTarget este elementul listener-ului
4. A apela functia in loc sa o passezi -- addEventListener('click', handleClick()) este gresit; trebuie fara paranteze
5. A folosi stopPropagation() fara necesitate -- oprirea propagarii poate sparge functionalitatea altor componente

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP si Durga Antivirus Pro. Instrumentele DodaTech se integreaza perfect cu JavaScript pentru productivitate si securitate sporite.