Události

Obsah:

Co to jsou události

Událostí může být například kliknutí myší na tlačítko, na obrázek apod., změna pole formuláře, odeslání formuláře, najetí myší nad text, obrázek, apod.

Na tuto událost reaguje internetový prohlížeč spuštěním funkce, která je u daného objektu této události přiřazena. (Více o funkcích v kapitole funkce.)

V hlavičce stránky zapíšeme např. funkci, která mění obrázek:

function zmenaObrazku(cislo)
{
  if (cislo<10) cislo = "0" + cislo;
  document.getElementById("obr").src = "img/foto" + cislo + ".jpg";
}

Tlačítkům 1 a 2 přiřadíme tuto funkci při kliknutí:

<input type="button" value="1" onclick="zmenaObrazku(1)">
<input type="button" value="2" onclick="zmenaObrazku(2)">

Obrázku můžeme přiřadit tuto funkci při najetí myši a při odjetí myši:

<img src="img/foto02.jpg" id="obr" height="25" width="100" alt=""
     onmouseover="zmenaObrazku(1)" onmouseout="zmenaObrazku(2)">

Přehled událostí

onclick - kliknutí myší na objekt
ondblclick - dvojklik myší
onmouseover - najetí myší nad objekt
onmouseout - odjetí myší z objektu
onmousemove - přesun myší
onmousedown - stisknutí tlačítka myši
onmouseup - uvolnění tlačítka myši
onfocus - aktivace objektu
onblur - opuštění objektu
onchange - opuštění objektu po změně obsahu
onsubmit - odeslání formuláře
onreset - vymazání formuláře
onload - načtení objektu
onunload - zrušení objektu
onselect - označení textu
onkeypress - stisknutí a uvolnění klávesy
onkeydown - stisknutí klávesy
onkeyup - uvolnění klávesy
a další

Pro tlačítko používáme nejčastěji událost onclick, pro obrázek - onclick, onmouseover, onmouseout, onload, pro odkaz či normální text - onclick, onmouseover, onmouseout, pro pole formuláře - onfocus, onblur, onclick, onchange, pro formulář - onsubmit, onreset, pro tělo stránky - onload, onkeypress.

Zrušení události

Zrušení události provedeme nastavením návratové hodnoty funkce na false:

return false;

V html kódu přiřadíme události návratovou hodnotu funkce robněž pomocí return:

<form onsubmit="return kontrola()" action="data.php" method="post">

Při odeslání formuláře stisknutím tlačítka submit je před odesláním dat na server spuštěna funkce JavaScriptu přiřazená události onsubmit. Tato funkce provede kontrolu dat; nebudou-li data v pořádku, nastaví return=false. Tím se událost zruší a data nebudou na server odeslána.

Obdobně můžeme zrušit otevření odkazu. Přiřadíme-li odkazu funkci vyvolanou událostí onclick, která např. provede změnu obrázku ve stránce na další z galerie obrázků, pak return=false zruší otevření odkazu. Bude-li však v prohlížečí JavaScript vypnutý, nebude funkce spuštěna, obrázek ve stránce se nezmění, ale provede se otevření odkazu na nový obrázek.