HTML DOM permite JavaScript pentru a reacționa la evenimente HTML:
Reacționând la evenimente
O JavaScript poate fi executată atunci când are loc un eveniment, cum ar fi atunci când un utilizator face clic pe un element HTML.
Pentru a executa cod atunci când un utilizator face clic pe un element, adăugați un cod JavaScript pentru un atribut eveniment HTML:
onclick= Exemple de evenimente HTML: - Atunci când un utilizator face clic pe mouse-ul
- Atunci când o pagină web a încărcat
- Atunci când o imagine a fost încărcată
- Cand mouse-ul se mută peste un element
- Atunci când un câmp de intrare este schimbat
- Atunci când este prezentat un formular HTML
- Atunci când un utilizator accident vascular cerebral o cheie
În acest exemplu, conținutul <h1> Elementul este schimbat atunci când un utilizator face clic pe ea:
Exemplu
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Încearcă - l singur » În acest exemplu, o funcție este numit de tratare a evenimentului:
Exemplu
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Încearcă - l singur »
Atributele HTML Eveniment
Pentru a aloca evenimente în HTML elemente puteți utiliza atribute eveniment.
Exemplu
Atribuirea unui eveniment onclick la un element de buton:
<button onclick="displayDate()">Try it</button>
Încearcă - l singur » În exemplul de mai sus, o funcție numită displayDate va fi executat atunci când butonul este apăsat.
Asociați evenimente folosind DOM HTML
HTML DOM vă permite să atribuiți evenimente la elemente HTML folosind JavaScript:
Exemplu
Atribuirea unui eveniment onclick la un element de buton:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Încearcă - l singur » În exemplul de mai sus, o funcție numită displayDate este atribuit unui element HTML cu id="myBtn" .
Funcția va fi executată atunci când butonul este apăsat.
De onload și onunload Evenimente
De onload și onunload evenimentele sunt declanșate atunci când utilizatorul intră sau părăsește pagina.
onload eveniment poate fi folosit pentru a verifica tipul de browser și versiunea browser - ul vizitatorului, și încărcați versiunea corectă a paginii web pe baza informațiilor.
De onload și onunload evenimente pot fi folosite pentru a face față cu cookies - cookies .
onchange Evenimentul
onchange Evenimentul este adesea folosit în combinație cu validarea câmpurilor de intrare.
Mai jos este un exemplu de modul de utilizare a onchange . upperCase() funcția va fi apelate atunci când un utilizator modifică conținutul unui câmp de intrare.
De onmouseover și onmouseout Evenimente
onmouseover și onmouseout evenimente pot fi folosite pentru a declanșa o funcție atunci când utilizatorul plasează cursorul deasupra, sau dintr - un element HTML:
Mouse-ul peste Me
onmousedown , onmouseup și onclick Evenimente
onmousedown , onmouseup și onclick evenimente sunt toate părțile componente ale unui click de mouse. În primul rând , atunci când un buton al mouse - ului este apasat atunci onmousedown evenimentul este declanșat, atunci, când butonul mouse - ului este eliberat, onmouseup eveniment este declanșat, în cele din urmă, atunci când faceți clic cu mouse-ul este finalizat, onclick evenimentul este declanșat.
" onmousedown="mDown(this)" onmouseup="mUp(this)">
Click Me
Mai multe exemple
onmousedown și onmouseup
Modificarea unei imagini atunci când un utilizator ține apăsat butonul mouse-ului.
onload
Afișează o casetă de avertizare atunci când pagina a terminat de încărcare.
onfocus
Schimbarea culoare de fundal a unui câmp de intrare atunci când se concentreze.
mouse - ul Evenimente
Schimbarea culorii unui element atunci când cursorul se deplasează peste ea.
HTML DOM Eveniment obiect de referință
Pentru o listă a tuturor evenimentelor HTML DOM, uita - te la nostru complet HTML DOM Eveniment obiect de referință .
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 »