Události (click, submit…)

Co je událost?

Událost (event) je signál, že se něco stalo. Prohlížeč generuje události neustále – při každém kliknutí, pohybu myši, stisku klávesy nebo načtení stránky. JavaScript může na tyto události „naslouchat“ a spustit kód jako odpověď.

addEventListener()

Základní způsob napojení funkce na událost je metoda addEventListener(). Přijímá dva parametry: název události a funkci, která se spustí:

const tlacitko = document.querySelector('#theme-toggle');

tlacitko.addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

Nebo s šipkovou funkcí:

tlacitko.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

Na jeden prvek lze napojit více posluchačů různých událostí. Na jednu událost lze napojit i více různých funkcí.

Nejčastější typy událostí

Myš a dotyk

• click – kliknutí nebo aktivace klávesou Enter/mezerník u tlačítka
• dblclick – dvojklik
• mouseenter / mouseleave – najetí / opuštění prvku myší
• touchstart / touchend – dotykové události

Klávesnice

• keydown – stisk klávesy (spustí se i při držení)
• keyup – uvolnění klávesy

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    zavritModal();
  }
});

Formulář

• submit – odeslání formuláře
• change – změna hodnoty formulářového pole
• input – každá změna v textovém poli (průběžně)
• focus / blur – vstup / opuštění pole

const formular = document.querySelector('form');

formular.addEventListener('submit', (e) => {
  e.preventDefault();   // Zabrání výchozímu odeslání stránky
  // Vlastní zpracování formuláře
});

Stránka

• DOMContentLoaded – HTML byl načten a DOM je připraven
• load – stránka včetně obrázků je plně načtena
• resize – změna velikosti okna prohlížeče

Objekt události

Funkce obsluhující událost může přijímat parametr – objekt události. Obsahuje informace o tom, co se stalo:

document.addEventListener('keydown', (e) => {
  console.log(e.key);        // Název stisknuté klávesy
  console.log(e.target);     // Prvek, který událost vyvolal
  console.log(e.type);       // Typ události ('keydown')
});

Metoda e.preventDefault() zabrání výchozí akci prohlížeče (například odeslání formuláře nebo přechod na odkaz).

Události a přístupnost

Událost click na tlačítku nebo odkazu se automaticky spustí i při stisku klávesy Enter nebo mezerníku – prohlížeč to zajistí za tebe. Pokud ale napojíš click na jiný prvek (například <div>), klávesnice ho nebude aktivovat. Proto vždy preferuj sémantické prvky (<button>, <a>) – nebo přidej klávesnicový handler ručně.

Tip od Zdeňka

Zdeněk radí: Nikdy nepřidávej click událost na <div> nebo <span>, pokud tam může být <button>. Tlačítko zvládne kliknutí myší, dotyk, Enter i mezerník automaticky – a VoiceOver ho oznámí jako tlačítko. Div to nezvládne nic z toho bez spousty extra JavaScriptu a ARIA atributů. Správná volba prvku ušetří práci a zaručí přístupnost od základu.