Události HTML jsou „věci“, které se dějí s prvky HTML.
Když je na stránkách HTML použit JavaScript, může JavaScript "reagovat"na tyto události.
Událostí HTML může být něco, co dělá prohlížeč, nebo něco, co dělá uživatel.
Zde je několik příkladů událostí HTML:
Načítání webové stránky HTML bylo dokončeno
Vstupní pole HTML bylo změněno
Bylo kliknuto na tlačítko HTML
Často, když se něco stane, možná budete chtít něco udělat.
JavaScript vám umožňuje spustit kód, když jsou detekovány události.
HTML umožňuje přidávat atributy obsluhy událostí s kódem JavaScript do prvků HTML.
S jednoduchými uvozovkami:
<element
event='some JavaScript'>S dvojitými uvozovkami:
<element
event="some JavaScript">V následujícím příkladu je atribut onclick (s kódem) přidán do Prvek <button>:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Ve výše uvedeném příkladu kód JavaScript změní obsah prvek s id="demo".
V dalším příkladu kód změní obsah jeho vlastní prvek (pomocí tohoto.innerHTML):
<button onclick="this.innerHTML = Date()">The time is?</button>Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
Kód JavaScript je často dlouhý několik řádků. Je běžnější vidět, že atributy událostí volají funkce:
<button onclick="displayDate()">The time is?</button>Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Zde je seznam některých běžných událostí HTML:
Element HTML byl změněn
Uživatel klikne na prvek HTML
Uživatel najede myší na prvek HTML
Uživatel přesune myš pryč od prvku HTML
Uživatel stiskne klávesu na klávesnici
Prohlížeč dokončil načítání stránky
Seznam je mnohem delší: W3Schools JavaScript Reference HTML DOM Events.
Obslužné rutiny událostí lze použít ke zpracování a ověřování uživatelského vstupu, uživatelských akcí, a akce prohlížeče:
Věci, které je třeba udělat při každém načtení stránky
Věci, které je třeba udělat, když je stránka zavřená
Akce, která by měla být provedena, když uživatel klikne na tlačítko
Obsah, který by měl být ověřen, když uživatel zadá data
A více ...
Aby JavaScript mohl pracovat s událostmi, lze použít mnoho různých metod:
Atributy události HTML mohou přímo spouštět kód JavaScript
Atributy události HTML mohou volat funkce JavaScriptu
Elementům HTML můžete přiřadit vlastní funkce obsluhy události
Můžete zabránit odesílání nebo zpracování událostí
A více ...
V kapitolách HTML DOM se dozvíte mnohem více o událostech a obslužných rutinách událostí.