JavaScript HTML události DOM
HTML DOM umožňuje JavaScriptu reagovat na události HTML:
Reakce na události
JavaScript lze spustit, když dojde k události, například když uživatel klikne na prvek HTML.
Chcete-li spustit kód, když uživatel klikne na prvek, přidejte kód JavaScript do atributu události HTML:
onclick=JavaScript
Příklady událostí HTML:
- Když uživatel klikne myší
- Když se načte webová stránka
- Po načtení obrázku
- Když se myš pohybuje nad prvkem
- Když se změní vstupní pole
- Při odeslání formuláře HTML
- Když uživatel stiskne klávesu
V tomto příkladu se obsah <h1>
prvku změní, když na něj uživatel klikne:
Příklad
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
V tomto příkladu je funkce volána z obsluhy události:
Příklad
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Atributy události HTML
Chcete-li přiřadit události k prvkům HTML, můžete použít atributy událostí.
Příklad
Přiřaďte událost onclick prvku tlačítka:
<button onclick="displayDate()">Try it</button>
Ve výše uvedeném příkladu displayDate
se po klepnutí na tlačítko provede pojmenovaná funkce.
Přiřaďte události pomocí HTML DOM
HTML DOM vám umožňuje přiřadit události k prvkům HTML pomocí JavaScriptu:
Příklad
Přiřaďte událost onclick prvku tlačítka:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Ve výše uvedeném příkladu je funkce s názvem displayDate
přiřazena prvku HTML s příponou id="myBtn"
.
Funkce se provede po kliknutí na tlačítko.
Události onload a onunload
Události onload
a onunload
se spouštějí, když uživatel vstoupí na stránku nebo ji opustí.
Událost onload
lze použít ke kontrole typu prohlížeče a verze prohlížeče návštěvníka a na základě informací načíst správnou verzi webové stránky.
Události onload
a onunload
lze použít ke zpracování souborů cookie.
Příklad
<body onload="checkCookies()">
Událost při změně
Událost onchange
se často používá v kombinaci s validací vstupních polí.
Níže je uveden příklad použití onchange. Funkce upperCase()
bude volána, když uživatel změní obsah vstupního pole.
Příklad
<input type="text" id="fname"
onchange="upperCase()">
Události onmouseover a onmouseout
Události onmouseover
a onmouseout
lze použít ke spuštění funkce, když uživatel najede myší na prvek HTML nebo z něj odejde:
Události onmousedown, onmouseup a onclick
Všechny události onmousedown
, onmouseup
, a onclick
jsou součástí kliknutí myší. Nejprve při kliknutí na tlačítko myši se spustí událost onmousedown, poté, když se tlačítko myši uvolní, se spustí událost onmouseup a nakonec, když je kliknutí dokončeno, je spuštěna událost onclick.
Další příklady
Změní obrázek, když uživatel podrží tlačítko myši.
Zobrazí okno s upozorněním, když se stránka načte.
Změňte barvu pozadí vstupního pole, když je aktivní.
Změna barvy prvku, když se nad ním pohybuje kurzor.
Odkaz na objekt události HTML DOM
Seznam všech událostí HTML DOM naleznete v naší úplné Referenční příručce objektu událostí HTML DOM .