onload tapahtuma

DOM-tapahtumat Event-objekti

Määrittely ja käyttö

onload tapahtuma tapahtuu, kun objekti on ladattu.

onload tapahtuma käytetään yleensä <body>-elementissä, jotta skriptejä suoritetaan, kun sivusto on täysin ladattu (mukaan lukien kuvat, skriptit, CSS-tiedostot jne.).

onload tapahtuma voidaan käyttää selaimen tyyppien ja versioiden tarkistamiseen kävijän selaimessa ja ladata oikea sivustoversio näiden tietojen perusteella.

onload-tapahtuma voidaan käyttää myös cookie:n käsittelyyn (katso alla olevat lisäesimerkit).

Esimerkki

Suorita JavaScript heti sivun lataamisen jälkeen:

<body onload="myFunction()">

Kokeile itse

Esimerkki 2

Käytä onload-tapahtumaa <img>-elementissä. Kun kuva on ladattu, näytä heti ilmoitus "Kuva on ladattu":

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

Kokeile itse

Esimerkki 3

Käytä onload-tapahtumaa cookie:n käsittelyyn:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
     text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

Kokeile itse

Syntaksi

HTML:ssä:

<elementti onload="myScript">

Kokeile itse

JavaScriptissa:

objekti.onload = function(){myScript};

Kokeile itse

JavaScriptissa käytetään addEventListener() -menetelmää:

objekti.addEventListener("load", myScript);

Kokeile itse

Huomautus:Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() -menetelmä.

Tekninen yksityiskohta

Päihteessä: Ei tuettu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: Jos tapahtuma on luotu käyttöliittymästä:UiEvent。 Event.
Tuetut HTML-merkit: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM-versio: Tason 2-tapahtumat

Selaimen tuki

Tapahtumat Chrome IE Firefox Safari Opera
onload Tuki Tuki Tuki Tuki Tuki
DOM-tapahtumat Event-objekti