Zdarzenia JavaScript HTML DOM
- Poprzednia strona Animacje DOM
- Następna strona Programiści DOM zdarzeń
HTML DOM pozwala JavaScript na reakcję na wydarzenia HTML:
Reakcja na wydarzenie
JavaScript może wykonywać się w momencie zdarzenia, np. gdy użytkownik kliknie element HTML.
Aby wykonać kod, gdy użytkownik kliknie element, dodaj kod JavaScript do atrybutu wydarzenia HTML:
onclick=JavaScript
Przykład wydarzenia HTML:
- Kiedy użytkownik kliknie myszą
- kiedy strona jest ładowana
- kiedy obraz jest ładowany
- kiedy kursor myszy przechodzi nad element
- kiedy pole wejściowe jest zmieniane
- kiedy formularz HTML jest wysyłany
- kiedy użytkownik naciska klawisz
W tym przykładzie, gdy użytkownik kliknie <h1> zostanie zmieniona jej zawartość:
przykład
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Hello!'">Kliknij ten tekst!</h1> </body> </html>
W tym przykładzie, funkcja jest wywoływana z event handlera:
przykład
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Kliknij ten tekst!</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
Atrybuty wydarzeń HTML
Aby przypisać wydarzenie do elementu HTML, możesz użyć atrybutów wydarzeń.
przykład
przypisanie do elementu button onclick eventy:
<button onclick="displayDate()">Spróbuj</button>
W przykładzie, funkcja o nazwie displayDate zostanie wykonana, gdy klikniesz przycisk.
przypisanie事件 za pomocą HTML DOM
HTML DOM pozwala na przypisanie事件 do elementów HTML za pomocą JavaScript:
przykład
ustawienie dla elementu button onclick eventy:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
W przykładzie, funkcja o nazwie displayDate przypisana jest do elementu HTML o id="myBtn".
kiedy klikniesz przycisk, zostanie wykonana funkcja.
eventy onload i onunload
kiedy użytkownik wchodzi na stronę oraz opuszcza ją, wywoływane są onload i onunload eventy.
onload eventy mogą być używane do wykrywania typu i wersji przeglądarki użytkownika, a następnie na tej podstawie wczytania odpowiedniej wersji strony.
onload i onunload eventy mogą być używane do przetwarzania ciasteczek.
przykład
<body onload="checkCookies()">
eventu onchange
onchange eventy są często używane w połączeniu z walidacją pól wejściowych.
poniżej znajduje się przykład, jak używać onchange kiedy użytkownik zmienia zawartość pola wejściowego, wywoływana jest funkcja upperCase().
przykład
<input type="text" id="fname" onchange="upperCase()">
eventi onmouseover i onmouseout
onmouseover i onmouseout Zdarzenia mogą być używane do wywołania funkcji, gdy użytkownik przenosi mysz nad HTML elementem lub poza nim:
zdarzenia onmousedown, onmouseup oraz onclick
onmousedown, onmouseup i onclick Zdarzenia tworzą pełne zdarzenie kliknięcia myszy.
Po pierwsze, gdy przycisk myszy zostanie kliknięty:onmousedown Zdarzenie zostało wywołane; następnie, gdy przycisk myszy zostanie puszczone:onmouseup Zdarzenie zostało wywołane; na końcu, gdy kliknięcie myszy zostanie zakończone:onclick Zdarzenie zostało wywołane.
Więcej przykładów
- onmousedown i onmouseup
- Zmiana obrazu, gdy użytkownik naciśnie przycisk myszy.
- onload
- Wyświetlenie okna alarmowego, gdy strona zostanie całkowicie załadowana.
- onfocus
- Zmiana koloru tła pola wejściowego, gdy jest ono aktywnym polem.
- Zdarzenia myszy
- Zmiana koloru elementu, gdy wskaźnik wskazuje na niego.
Podręcznik referencyjny obiektu zdarzenia HTML DOM
Aby uzyskać pełną listę zdarzeń HTML DOM, odwiedź naszą kompletną Podręcznik referencyjny obiektu zdarzenia HTML DOM.
- Poprzednia strona Animacje DOM
- Następna strona Programiści DOM zdarzeń
