#1 Událost
Událostí se rozumí akce, která se provede s nebo na prvku. Touto akcí (událostí) může být například kliknutí na prvek, akce scrollování, psaní do inputu, načtení dané stránky a podobně.
JavaScript dokáže na tyto události reagovat a něco provést.
#2 Spuštění a poslech události
Spuštění nějaké akce, která navazuje na danou událost lze provést dvěma způsoby – v HTML pomocí atributu pro danou událost nebo v JavaScriptu pomocí funkce addEventListener().
HTML
Ke každému prvku lze přiřadit atribut, který bude volat JavaScriptový kód při dané události. Jeho syntaxe je následující:
<div událost="JS kód"></div>
Lze to využít například takto…
<div onclick="funkce()"></div>
…kdy pomocí posluchače onclick čeká kód na to, dokud uživatel na daný prvek neklikne a následně spustí funkci funkce().
JavaScript
V JavaScriptu posluchače fungují podobně – je potřeba mít prvek, ke kterému nepřipojíme atribut, ale funkci addEventListener, jejíž argumenty jsou typ události a funkce. Například takto:
<div id="prvek"></div>
const prvek = document.getElementById('prvek');
function zobrazText() {
// Kód funkce
}
prvek.addEventListener('click', zobrazText);
V tomto kódu se nachází tři hlavní části posluchače – volací funkce addEventListener, v níž se nachází název dané události (zde bez přípony on- narozdíl od HTML) a název funkce, kterou voláme bez argumentů a argumentačních závorek.
Funkci lze také vložit rovnou do posluchače pomocí Arrow funkce:
const prvek = document.getElementById('prvek');
prvek.addEventListener('click', (e) => {
// Kód funkce
});
#3 Klíčové slovo this
Pomocí klíčového slova this lze rovnou provádět akci na daném prvku bez toho, aby jej bylo potřeba nejdříve deklarovat.
Klasická deklarace…
<div id="prvek" onclick="document.getElementById('prvek').innerHTML = 'Ahoj!'"></div>
…a deklarace pomocí this…
<div id="prvek" onclick="this.innerHTML = 'Ahoj!'"></div>