JavaScript HTML DOM tapahtumat

HTML DOM mahdollistaa JavaScriptin reagoimisen HTML-tapahtumiin:

Hiiren siirtyminen ylös!
Napsauta minua

Reagoi tapahtumiin

JavaScript voi suorittaa koodia tapahtuman aikana, kuten kun käyttäjä napsauttaa HTML-elementtiä.

Jos haluat suorittaa koodia käyttäjän napsauttaessa elementtiä, lisää JavaScript-koodi HTML-tapahtumamäärittelyyn:

onclick=JavaScript

HTML-tapahtuman esimerkki:

  • Kun käyttäjä napsauttaa hiirtä
  • kun sivu ladataan
  • kun kuva ladataan
  • kun hiiren osoitin siirtyy elementille
  • kun syöttökenttä muuttuu
  • kun HTML-lomake lähetetään
  • kun käyttäjä napauttaa näppäintä

Tässä esimerkissä, kun käyttäjä napsauttaa <h1> muutetaan sen sisältöä:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Napsauta tätä tekstiä!</h1>
</body>
</html>

Kokeile itse

Tässä esimerkissä kutsutaan funktiota suoraan tapahtumakäsittelijästä:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Napsauta tätä tekstiä!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Kokeile itse

HTML-tapahtumapropertyt

Jos haluat määrittää tapahtuman HTML-elementille, voit käyttää tapahtumapropertya.

Esimerkki

määritetään painikkeelle onclick tapahtuma:

<button onclick="displayDate()">Kokeile</button>

Kokeile itse

Esimerkissä nimeltä displayDate oleva funktio suoritetaan, kun painiketta painetaan.

Määritä tapahtumat HTML DOM:n avulla

HTML DOM mahdollistaa JavaScriptin käytön HTML-elementtien tapahtumien määrittämiseen:

Esimerkki

määritetään painikkeelle onclick tapahtuma:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Kokeile itse

Esimerkissä nimeltä displayDate oleva funktio asetetaan HTML-elementille id="myBtn".

kun painetaan painiketta, suoritetaan funktio.

onload ja onunload-tapahtumat

Kun käyttäjä siirtyy sivulle tai poistuu sivulta, aktivoituu onload ja onunload tapahtuma.

onload tapahtumaa voidaan käyttää selaajan tyyppien ja versioiden tunnistamiseen, ja sen perusteella ladata oikea verkkosivun versio.

onload ja onunload tapahtumaa voidaan käyttää selaimesi evästeiden käsittelyyn.

Esimerkki

<body onload="checkCookies()">

Kokeile itse

onchange-tapahtuma

onchange tapahtumat yhdistetään usein syöttökenttien validointiin.

Alla on esimerkki siitä, miten onchange esimerkistä. Kun käyttäjä muuttaa syöttökentän sisältöä, kutsutaan upperCase()-funktioita.

Esimerkki

<input type="text" id="fname" onchange="upperCase()">

Kokeile itse

onmouseover ja onmouseout-tapahtumat

onmouseover ja onmouseout Tapahtumia voidaan käyttää, kun käyttäjä siirtää hiirtä HTML-elementin päälle tai pois siitä, jotta jokin funktio laukaistaan:

Hiiren siirtyminen ylös!

Kokeile itse

onmousedown, onmouseup ja onclick-tapahtumat

onmousedown, onmouseup ja onclick Tapahtumat muodostavat täyden hiiren napsautustapahtuman.

Ensimmäinen, kun hiiren painike napsautetaanonmousedown Tapahtuma on laukka；sitten, kun hiiren painike vapautetaanonmouseup Tapahtuma on laukka；lopuksi, kun hiiren napsautus on valmisonclick Tapahtuma on laukka.

Napsauta minua

Kokeile itse

Lisää esimerkkejä

onmousedown ja onmouseup
Muuta kuvaa, kun käyttäjä painaa hiiren painiketta.
onload
Näytä hälytysikkuna, kun sivu on ladataan valmiiksi.
onfocus
Muuta taustaväri, kun syötteen kenttä saa fokuksen.
Hiiren tapahtumat
Muuta elementin väri, kun osoitin siirtyy sen päälle.

HTML-DOM-tapahtuma-objektin referenssikirja

Jos haluat tarkastella kaikkien HTML-DOM-tapahtumien luetteloa, vieraile täysimääräisessä HTML-DOM-tapahtuma-objektin referenssikirja.