Lekce 16 - Zpracování událostí DOM pomocí posluchačů v JavaScriptu Nové

V minulé lekci, Základy práce s DOM a události v JavaScriptu, jsme začali tou nejčastěji používanou metodou DOMu - getElementById() a řekli jsme si něco o událostech.

V dnešním tutoriálu základů JavaScriptu budeme pokračovat v práci s elementy DOM a jejich událostmi. Představíme si posluchače událostí a dozvíme se, proč je lepší používat právě posluchače pro zpracovaní událostí. Naši jednoduchou kalkulačku pak ještě vylepšíme pomocí anonymní funkce a ukážeme si, jak aplikaci správně rozdělit do více souborů. Docílíme tím oddělení HTML a JavaScript kódu a zpřehledníme tak celkovou strukturu naší aplikace.

Posluchač událostí

Ačkoli události typu onclick jsou stále funkční a mohou být vhodné pro jednoduché účely, ukážeme si ještě druhý způsob zpracování událostí. Tlačítku v něm pomocí metody addEventListener() přidáme posluchače událostí. Tato metoda umožňuje přiřadit více obslužných funkcí ke stejné události na jednom elementu. Stejně tak můžeme jednomu elementu přiřadit posluchače různých událostí (například kliknutí, najetí myší, stisk klávesy) a každou z těchto událostí obsloužit nějakou funkcí.

V prvním parametru metody addEventListener() uvádíme název události a ve druhém funkci, která se má provést.

Nejprve si připomeňme náš původní JavaScript kód:

let tlacitkoElement = document.getElementById("tlacitko");
let cislo1Element = document.getElementById("cislo1");
let cislo2Element = document.getElementById("cislo2");

function secti() {
    let cislo1 = parseFloat(cislo1Element.value);
    let cislo2 = parseFloat(cislo2Element.value);

    alert(cislo1 + cislo2);
}

tlacitkoElement.onclick = secti;

Řádek s obsluhou události kliknutí (tlacitkoElement.onclick = secti;) nyní přepíšeme na následující:

tlacitkoElement.addEventListener("click", secti);

Funkci secti() zde předáváme jako tzv. callback, bez závorek.

Aplikace nyní funguje úplně stejně, ale splňuje dobré praktiky. Tlačítko v budoucnu může vyvolávat i další události.

Použití anonymní funkce

Ukažme si ještě pro úplnost, jak lze stávající kód upravit s využitím anonymní funkce. Funkci secti() tedy smažeme a její tělo přesuneme do metody addEventListener(). Celý skript kalkulačky bude vypadat takto:

let tlacitkoElement = document.getElementById("tlacitko");
let cislo1Element = document.getElementById("cislo1");
let cislo2Element = document.getElementById("cislo2");

tlacitkoElement.addEventListener("click", function() {
    let cislo1 = parseFloat(cislo1Element.value);
    let cislo2 = parseFloat(cislo2Element.value);

    alert(cislo1 + cislo2);
});

Shrňme si v krátkosti jeho jednotlivé části:

• document je objekt reprezentující celý obsah webové stránky. V JavaScriptu je to vstupní bod pro práci s DOM.
• getElementById() je metoda objektu document, která vyhledá a vrátí element s konkrétním id zadaném v parametru. Výsledkem je reference na konkrétní element na stránce, v našem případě na tlačítko pro součet a na dvě pole pro zadání čísel.
• addEventListener() je metoda, která "naslouchá" konkrétním událostem, jež se na daném elementu vyskytnou. Jako parametr ji zde zadáváme název události, kterou chceme sledovat (click) a funkci, která se má po kliknutí vykonat.

Externí soubory

JavaScript bychom ideálně neměli v HTML souboru vůbec zahlédnout, protože míchat jazyky v jednom souboru je téměř vždy špatná praktika. Jistě již víme, že např. CSS soubory se píšou samostatně a z HTML se na ně poté odkazuje. Když to uděláme stejně s JavaScriptem, hovoříme o tzv. neobtruzivním JavaScriptu. Tímto výrazem označujeme kód, který v HTML nijak nepřekáží, ale je v samostatných souborech.

Doposud jsme pro jednoduchost psali náš kód v JavaScriptu přímo do HTML stránky mezi tagy <script>.

Odteď JavaScript budeme psát do externího souboru, na který z hlavní stránky odkážeme.

Ve složce projektu si tedy nyní vytvoříme podložku js/, v ní vytvoříme soubor kalkulacka.js a celý kód pro obsluhu kalkulačky (bez tagů <script>) do něj uložíme. Z HTML jej úplně odstraníme. V hlavičce naší stránky pak přidáme následující řádek, který na skript odkáže:

<script src="js/kalkulacka.js"></script>

<!DOCTYPE html>
<html lang="cs-cz">

<head>
    <meta charset="UTF-8">
    <title>Jednoduchá webová kalkulačka</title>
    <script src="js/kalkulacka.js"></script>
</head>

<body>
        <h1>Jednoduchá webová kalkulačka</h1>
        <input type="text" id="cislo1" size="5" /> +
        <input type="text" id="cislo2" size="5" />
        <button id="tlacitko">Sečti!</button>
        <p>
            <a href="https://www.itnetwork.cz">
                Výuková aplikace z ITnetwork.cz
            </a>
        </p>
</body>

</html>

let tlacitkoElement = document.getElementById("tlacitko");
let cislo1Element = document.getElementById("cislo1");
let cislo2Element = document.getElementById("cislo2");

tlacitkoElement.addEventListener("click", function() {
    let cislo1 = parseFloat(cislo1Element.value);
    let cislo2 = parseFloat(cislo2Element.value);

    alert(cislo1 + cislo2);
});

Událost onload

Skripty se někdy alternativně vkládají také těsně před zavírací tag </body>. Skript se tak spouští až ve chvíli, kdy je stránka kompletně načtená. Stejného výsledku dosáhneme pomocí události onload, která se nalézá na objektu window. Upravíme náš kód tak, aby se spustil právě po načtení stránky bez ohledu na to, v jaké části stránky je vložený. K obsluze událostí využijeme znovu anonymní funkci:

window.onload = function() {
    let tlacitkoElement = document.getElementById("tlacitko");
    let cislo1Element = document.getElementById("cislo1");
    let cislo2Element = document.getElementById("cislo2");

    tlacitkoElement.addEventListener("click", function() {
        let cislo1 = parseFloat(cislo1Element.value);
        let cislo2 = parseFloat(cislo2Element.value);

        alert(cislo1 + cislo2);
    });
};

Aplikace funguje stejně dobře jako předtím. Můžeme si zkusit skript přesunout třeba pod začátek <body> a uvidíme, že se kód spustí až ve chvíli, kdy je celá stránka načtená.

Řešení pomocí posluchače událostí

I v tomto případě lze nahradit událost onload metodou addEventListener(). Ekvivalentní zápis kódu výše s využitím posluchače událostí pak vypadá takto:

window.addEventListener("load", function() {
    let tlacitko = document.getElementById("tlacitko");
    let cislo1 = document.getElementById("cislo1");
    let cislo2 = document.getElementById("cislo2");

    tlacitkoElement.addEventListener("click", function() {
        let cislo1 = parseFloat(cislo1Element.value);
        let cislo2 = parseFloat(cislo2Element.value);

        alert(cislo1 + cislo2);
    });
});

Posluchače jsme nastavili na událost load. Skript se tedy spustí až po načtení HTML stránky včetně externích zdrojů, například obrázků. Protože zatím v aplikaci žádné obrázky nemáme, mohli bychom použít také událost DOMContentLoaded, která čeká pouze na načtení elementů DOM.

Dnešní kalkulačka je jako vždy ke stažení v archivu pod lekcí.

V příští lekci, Manipulace s DOM v JavaScriptu, budeme vybírat prvky DOM. Díky tomu pak můžeme vytvářet prvky nové, vkládat je do jiných, přesouvat, mazat a upravovat.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.