HTML DOM pozwala JavaScript, żeby reagować na zdarzenia HTML:
Reagowanie na zdarzenia
Javascript, może być wykonane, gdy wystąpi zdarzenie, na przykład, gdy użytkownik kliknie na elemencie HTML.
Na wykonanie kodu, gdy użytkownik kliknie element, dodać kod JavaScript do atrybutu zdarzenia HTML:
onclick=JavaScript
Przykłady zdarzeń HTML:
- Gdy użytkownik kliknie myszką
- Gdy strona internetowa została załadowana
- Kiedy obraz został załadowany
- Kiedy mysz porusza się nad elementem
- Gdy pole wejściowe zostanie zmieniona
- Gdy formularz jest składany HTML
- Gdy użytkownik obrysy klucza
W tym przykładzie zawartość <h1> elementu zmienia się, gdy użytkownik kliknie na nim:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Spróbuj sam " W tym przykładzie, funkcja jest wywoływana z obsługi zdarzeń:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Spróbuj sam " Atrybuty HTML Event
Aby przypisać zdarzenia do elementów HTML można używać atrybutów zdarzeń.
Przykład
Przypisać zdarzenie onclick do elementu przycisku:
<button onclick="displayDate()">Try it</button>
Spróbuj sam " W powyższym przykładzie, funkcja o nazwie displayDate będą wykonywane, gdy przycisk zostanie kliknięty.
Przypisywanie zdarzeń przy użyciu HTML DOM
DOM HTML pozwala przypisać zdarzenia do elementów HTML z użyciem JavaScript:
Przykład
Przypisać zdarzenie onclick do elementu przycisku:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Spróbuj sam " W powyższym przykładzie, funkcja o nazwie displayDate jest przypisany do elementu HTML z id="myBtn" .
Funkcja zostanie wykonana po kliknięciu przycisku.
W onload i onunload Wydarzenia
W onload i onunload zdarzenia są wywoływane, gdy użytkownik wchodzi lub opuszcza stronę.
onload zdarzenie może być używana do sprawdzania typ przeglądarki i wersji przeglądarki odwiedzającego, a następnie załadować odpowiedni wersję strony internetowej w oparciu o informacje.
W onload i onunload zdarzenia mogą być wykorzystane do czynienia z plików cookie.
onchange Event
onchange zdarzenie jest często używane w połączeniu z walidacji pól wejściowych.
Poniżej znajduje się przykład jak użyć onchange . upperCase() funkcja zostanie wywołana, gdy użytkownik zmienia zawartość pola wejściowego.
W onmouseover i onmouseout Wydarzenia
onmouseover i onmouseout zdarzeń może być stosowany w celu wywołania funkcji, gdy użytkownik najedzie myszą, lub poza, elementu HTML:
onmousedown , onmouseup i onclick Wydarzenia
onmousedown , onmouseup i onclick zdarzenia są wszystkie części kliknięciem myszki. Po pierwsze, gdy myszy przycisk zostanie kliknięty, onmousedown jest zdarzenie, a następnie, gdy przycisk myszy zostanie zwolniony, onmouseup zdarzenie jest wywoływane, w końcu, gdy kliknięcie myszą jest zakończona, onclick zdarzenia.
Więcej przykładów
onmousedown i onmouseup
Zmiana obrazu, gdy użytkownik trzyma naciśnięty przycisk myszy.
onload
Wyświetli okno alertu, gdy strona była zakończona załadunek.
onfocus
Zmień background-color w polu wprowadzania, gdy robi się skupić.
Zdarzenia myszy
Zmień kolor elementu, gdy kursor przesuwa się nad nim.
HTML DOM Event Object Reference
Aby uzyskać listę wszystkich zdarzeń HTML DOM, spojrzeć na nasze kompletne HTML DOM Event odwołanie do obiektu .
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »