Obsluha událostí: Reaguj na kliknutí a klávesy
Nauč se, jak tvůj web reaguje na to, co dělá návštěvník. Od jednoduchých kliknutí po komplexní interakce.
Proč jsou události důležité?
Interaktivní web není jen statická stránka. Když návštěvník něco klikne, napíše text nebo přesune myš, nic se neděje automaticky — musíš mu říct, co má tvůj web dělat. To je právě role událostí.
Představ si to tak: Uživatel je jako host v restauraci. Když zamává rukou, číšník (tvůj kód) musí vědět, že má přijít. Bez té “mávací” akce by čekal navždy. V JavaScriptu se těm “mávajícím” akcím říkají události a číšníkům event listenery .
Jak to vlastně funguje?
Máš tři části skládanky:
Vyber element
Nejdřív musíš říct, kterému prvku chceš naslouchat. Třeba tlačítko, vstupní pole nebo obrázek.
Přidej naslouchač
Řekni JavaScriptu, na jakou událost má čekat — kliknutí, zadání textu, pohyb myši. To se nazývá addEventListener.
Spusť kód
Když se událost stane, spustí se tvá funkce. Můžeš měnit barvy, přidávat text, posílat data na server — cokoli chceš.
Kliknutí — nejčastější interakce
Kliknutí je nejjednoduššíí a nejpoužívanější událostí. Takřka každé tlačítko na webu má naslouchač na “click” událost.
Základní příklad:
const tlacitko = document.getElementById('moje-tlacitko');
tlacitko.addEventListener('click', function() {
alert('Kliknul jsi na mě!');
});
Co se tady děje? Hledáš element s ID “moje-tlacitko”, pak mu řekneš: “Poslouchej na kliknutí. Až se to stane, spusť tuhle funkci.” Jednoduchý koncept, ale velmi účinný. Stovky milionů webů v Česku i světě používá přesně tohle — click event listenery. To není skoro nic složitého.
Klávesy — ovládání z klávesnice
Ne všichni uživatelé mají myš nebo touchpad. Někdo se pohybuje pomocí klávesnice, někdo má zrak. Proto je důležité naslouchat klávesnicovým událostem.
keydown
Spustí se, když uživatel STISKNE klávesu. Palidesát herních her používá keydown pro ovládání postav.
keyup
Spustí se, když uživatel PUSTÍ klávesu. Použiješ to, když chceš vědět, kdy uživatel přestal psát.
keypress
Starší alternativa, dnes se používá méně. Lepší je keydown nebo input.
Příklad s klávesou Enter:
const vstup = document.querySelector('input');
vstup.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('Uživatel stiskl Enter!');
// Odešli formulář, hledej, atd.
}
});
Praktické tipy — co dělat a co ne
Používej addEventListener
Není to starý způsob (onclick=”…”), ale moderní přístup. Můžeš přidat více naslouchačů na jeden prvek.
Kontrolluj event object
Funkce dostane event jako parametr. Tam jsou informace: která klávesa, kde je myš, co se kliklo.
Odstraňuj naslouchače
Pokud prvek smažeš nebo ho už nepotřebuješ, odstraň i naslouchač. removeEventListener je tvůj přítel.
Nespouštěj těžké operace
Události se spouštějí často — kliknutí, pohyb myši. Dlouhé výpočty zpomalí web. Buď opatrný.
V praxi: Potvrzovací dialog
Chceš, aby uživatel potvrdil, že chce smazat něco důležitého? Tady je typický příklad, co se používá v desítkách projektů.
Tlačítko pro smazání s potvrzením:
const tlacitkoSmazat = document.querySelector('.smazat-btn');
tlacitkoSmazat.addEventListener('click', function(event) {
event.preventDefault();
if (confirm('Opravdu chceš smazat? Nejde to vrátit!')) {
// Smaž data, odešli na server
console.log('Mazání potvrzeno');
}
});
Metoda
preventDefault()
zabraňuje výchozímu chování prvku — třeba přesměrování odkazu. Pak se ptáš uživatele, a jen pokud řekne ano, pokračuješ. Praktické, jednoduché a účinné.
Chyby, které dělají všichni začátečníci
Zapomínáš na event object
Pokud chceš znát detaily — jaká klávesa, jaké souřadnice myši — musíš ho předat jako parametr. Bez něj víš jen, že se něco stalo.
Voláš funkci místo její reference
Špatně:
addEventListener('click', mojaFunkce())
. Správně:
addEventListener('click', mojaFunkce)
. Rozdíl v závorkách!
Nenajdeš element dřív, než vytvoříš naslouchač
Pokud skript běží před tím, než se prvek na stránce objeví, addEventListener nebude fungovat. Vždycky nech HTML načíst dřív.
Co ses naučil?
- Události jsou akce — kliknutí, klávesy, pohyb myši. Web na ně reaguje.
- addEventListener je moderní způsob, jak poslouchat na tyto akce.
- Click je nejčastější, ale existují desítky dalších — keydown, mouseover, input a více.
- Event object ti dá informace o tom, co se stalo — která klávesa, kde je myš.
- Praktické tipy: používej addEventListener, čisti naslouchače, nespouštěj těžké operace.
Teď můžeš tvůrčím přístupem vytvářet interaktivní weby, kde se stránka opravdu chová tak, jak to návštěvník čeká. To je první krok k pravému webovému vývojáři.
Chceš se naučit více?
Následující článek se zabývá tím, jak měnit CSS z JavaScriptu. Barvy, velikosti, všechno se dá řídit dynamicky.
Čti dál: Úprava stylů z JavaScriptuPoznámka
Tento článek obsahuje vzdělávací materiál o základech JavaScriptu a obsluze událostí. Příklady kódu jsou zjednodušeny pro lepší srozumitelnost. V reálných projektech se běžně používají pokročilejší techniky, frameworky jako React či Vue, a další nástroje pro správu složitých interakcí. Vždy si ověř kompatibilitu s různými prohlížeči a testuj svůj kód na různých zařízeních.
