Zdarzenie JavaScript HTML DOM

HTML DOM JavaScript, HTML ma zdolność do reagowania na zdarzenia.

Przykłady

Mouse Over Me
Kliknij mnie


Reagowanie na zdarzenia

Możemy uruchomić JavaScript, 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 atrybutów zdarzenie HTML:

onclick= JavaScript

HTML przykłady zdarzeń:

  • Gdy użytkownik kliknie myszką
  • Po załadowaniu strony
  • Gdy obraz jest załadowany
  • Gdy myszy porusza się nad elementem
  • Gdy pole wejścia zostanie zmieniony
  • Po przesłaniu formularza HTML
  • Kiedy użytkownik uruchamia klawisz

W tym przykładzie, gdy użytkownik na <h1> elementu po kliknięciu, zmieni jego zawartość:

Przykłady

<! DOCTYPE html>
<Html>
<Body>
<H1 onclick = "this.innerHTML =" Ojej! ""> Kliknij na tekst! </ H1>
</ Body>
</ Html>

Spróbuj »

W tym przypadku, aby wywołać funkcję z obsługi zdarzeń:

Przykłady

<! DOCTYPE html>
<Html>
<Head>
<Script>
Funkcja changetext (id)
{
id.innerHTML = "Ojej!";
}
</ Script>
</ Head>
<Body>
<H1 onclick = "changetext (this)"> kliknij na tekst! </ H1>
</ Body>
</ Html>

Spróbuj »


Atrybuty HTML Event

Aby przypisać zdarzenia do elementów HTML można używać atrybutów zdarzeń.

Przykłady

Przypisany do elementu button onclick zdarzenia:

<Button onclick = "displayDate () "> Kliknij tutaj </ button>

Spróbuj »

W powyższym przykładzie, funkcja o nazwie displayDate wykona po kliknięciu przycisku.


Użyj DOM HTML przypisać zdarzenie

HTML DOM pozwala na używanie JavaScript, aby przypisać zdarzenia do elementów HTML:

Przykłady

Przypisany do elementu button onclick zdarzenia:

<Script>
. Document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ Script>

Spróbuj »

W powyższym przykładzie, funkcja jest przypisana do określonego displayDate id = myButn "elementu HTML.

Kliknij przycisk, gdy funkcja JavaScript zostanie wykonany.


onload i zdarzenia onunload

onload i onunload zdarzenie jest wywoływane, gdy użytkownik wchodzi lub opuszcza stronę.

onload zdarzenie może być stosowany typ przeglądarki i wersja przeglądarki jest wykrywany użytkownik i na podstawie tych informacji, aby załadować poprawną wersję strony.

onload i zdarzenia onunload może być używany do obsługi plików cookie.

Przykłady

<Body onload = "checkCookies () ">

Spróbuj »


zdarzenie onchange

często w połączeniu walidacji pól wejściowych onchange wydarzeniem w użyciu.

Oto przykład jak używać onChange. Gdy użytkownik zmienia zawartość pola wejściowego, wywołuje funkcję (wielkimi literami).

Przykłady

<Input type = "text" id = "fname" onchange = "wielkimi literami ()">

Spróbuj »


onmouseover i onmouseout wydarzeń

onmouseover i onmouseout zdarzenia mogą być wykorzystane do wywołania funkcji, gdy mysz porusza użytkownika do górnej części elementu HTML lub elementy usunięte.

Przykłady

Prosty onmouseover-onmouseout instancji:

Mouse Over Me

Spróbuj »


onmousedown, onmouseup i zdarzenia onclick

onmousedown, onmouseup i onclick stanowią wszystkie części imprezy kliknięciem myszki. Po pierwsze, po kliknięciu przycisku myszy, spust onmousedown przypadku, gdy przycisk myszy zostanie zwolniony, będzie to powodować onmouseup zdarzenie, i wreszcie, gdy zakończenie kliknięciem myszy, będzie wyzwalać zdarzenie onclick.

Przykłady

Prosty onmousedown-onmouseup instancji:

Dziękuję


Więcej przykładów

onmousedown i onmouseup
Gdy użytkownik naciśnie przycisk myszy, zastąpienie obrazu.

onload
Po zakończeniu ładowania strony, wyświetla okno komunikatu.

onfocus
Gdy pole wejściowe ma ostrość, zmienić kolor tła.

zdarzenia myszy
Gdy wskaźnik przesuwa się nad elementem, zmienić jego kolor, gdy kursor z tekstu, jego kolor zmieni się ponownie.