Evenimente JavaScript onclick onmouseover

Detalii despre onclick

• Definiție Este un eveniment care rulează când elementul este apăsat cu mouse-ul sau tastat. Se folosește pentru butoane, linkuri sau imagini.
• Sintaxă de bază În HTML: <element onclick="codJavaScript">. Exemplu: <button onclick="alert('Bună!')">Salut</button> afișează o fereastră de alertă.
• Exemplu practic Un buton care numără clicuri: <button onclick="contor++">Clic</button> cu o variabilă contor în JavaScript.
• Alternativă modernă Se poate atașa cu addEventListener în JavaScript: element.addEventListener('click', functie), ceea ce separă HTML de cod.

Detalii despre onmouseover

• Definiție Este un eveniment care rulează când cursorul mouse-ului intră pe suprafața elementului. Util pentru efecte de hover.
• Sintaxă de bază În HTML: <element onmouseover="codJavaScript">. Exemplu: <div onmouseover="this.style.color='roșu'">Trec mouse-ul</div> schimbă culoarea textului.
• Exemplu practic O imagine care se schimbă la hover: <img src="normal.jpg" onmouseover="this.src='hover.jpg'"> arată o altă imagine când mouse-ul este deasupra.
• Evenimente înrudite onmouseout se execută când mouse-ul părăsește elementul, folosit împreună cu onmouseover pentru resetare.

Cum să le folosești eficient

1. 1
   Pasul 1: Planifică acțiunile Decide ce să se întâmple la fiecare eveniment. De exemplu, onclick pentru trimiterea unui formular, onmouseover pentru indicii vizuale.
2. 2
   Pasul 2: Scrie funcțiile JavaScript Definește funcții reutilizabile. Exemplu: function arataDetalii() { document.getElementById('detalii').style.display = 'block'; }.
3. 3
   Pasul 3: Atașează evenimentele Folosește atributele în HTML sau addEventListener pentru a lega funcțiile de elemente. Exemplu: <p onmouseover="arataDetalii()">Trece aici</p>.
4. 4
   Pasul 4: Testează și depanează Verifică în browser dacă evenimentele răspund corect și ajustează codul dacă este necesar.