JavaScript HTML Zdarzenia DOM
HTML DOM umożliwia JavaScriptowi reagowanie na zdarzenia HTML:
Reagowanie na wydarzenia
JavaScript może zostać wykonany, gdy wystąpi zdarzenie, na przykład gdy użytkownik kliknie element HTML.
Aby wykonać kod, gdy użytkownik kliknie element, dodaj kod JavaScript do atrybutu zdarzenia HTML:
onclick=JavaScript
Przykłady zdarzeń HTML:
- Gdy użytkownik kliknie myszą
- Po załadowaniu strony internetowej
- Po załadowaniu obrazu
- Gdy mysz porusza się po elemencie
- Gdy pole wejściowe zostanie zmienione
- Po przesłaniu formularza HTML
- Gdy użytkownik naciśnie klawisz
W tym przykładzie zawartość <h1>elementu zmienia się, gdy użytkownik go kliknie:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
W tym przykładzie funkcja jest wywoływana z programu 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>
Atrybuty zdarzeń HTML
Aby przypisać zdarzenia do elementów HTML, możesz użyć atrybutów zdarzenia.
Przykład
Przypisz zdarzenie onclick do elementu przycisku:
<button onclick="displayDate()">Try it</button>
W powyższym przykładzie funkcja o nazwie displayDatezostanie wykonana po kliknięciu przycisku.
Przypisz zdarzenia za pomocą HTML DOM
HTML DOM umożliwia przypisywanie zdarzeń do elementów HTML za pomocą JavaScript:
Przykład
Przypisz zdarzenie onclick do elementu przycisku:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
W powyższym przykładzie nazwana funkcja displayDatejest przypisana do elementu HTML z id="myBtn".
Funkcja zostanie wykonana po kliknięciu przycisku.
Zdarzenia onload i onunload
Zdarzenia onloadi onunloadsą wyzwalane, gdy użytkownik wchodzi lub opuszcza stronę.
Zdarzenie onloadmoże służyć do sprawdzenia typu i wersji przeglądarki odwiedzającego oraz do załadowania odpowiedniej wersji strony internetowej na podstawie tych informacji.
Zdarzenia onloadi onunloadmogą być używane do radzenia sobie z plikami cookie.
Przykład
<body onload="checkCookies()">
Wydarzenie onchange
Zdarzenie onchangejest często używane w połączeniu z walidacją pól wejściowych.
Poniżej znajduje się przykład wykorzystania onchange. Funkcja upperCase()
zostanie wywołana, gdy użytkownik zmieni zawartość pola wejściowego.
Przykład
<input type="text" id="fname"
onchange="upperCase()">
Wydarzenia onmouseover i onmouseout
Zdarzenia onmouseoveri onmouseoutmogą być używane do wyzwalania funkcji, gdy użytkownik najedzie myszą na element HTML lub poza nim:
Zdarzenia onmousedown, onmouseup i onclick
Zdarzenia onmousedown, onmouseupi onclicksą częścią kliknięcia myszą. Najpierw po kliknięciu przycisku myszy wyzwalane jest zdarzenie onmousedown, następnie, po zwolnieniu przycisku myszy, wyzwalane jest zdarzenie onmouseup, a na koniec, po zakończeniu kliknięcia, wyzwalane jest zdarzenie onclick.
Więcej przykładów
Zmienia obraz, gdy użytkownik przytrzymuje przycisk myszy.
Wyświetla okno ostrzeżenia po zakończeniu ładowania strony.
Zmienia kolor tła pola wejściowego, gdy staje się ono aktywne.
Zmienia kolor elementu, gdy kursor przesuwa się nad nim.
Dokumentacja obiektu zdarzenia DOM HTML
Listę wszystkich zdarzeń HTML DOM można znaleźć w naszej pełnej dokumentacji obiektu HTML DOM Event Object Reference .