17. diel - Spracovanie udalostí DOM pomocou poslucháčov v JavaScripte

V minulej lekcii, Základy práce s DOM a udalosti v JavaScripte, sme začali tou najpoužívanejšou metódou DOMu - getElementById() a povedali sme si niečo o udalostiach.

V dnešnom tutoriáli základov JavaScriptu budeme pokračovať v práci s elementmi DOM a ich udalosťami. Predstavíme si poslucháčov udalostí a dozvieme sa, prečo je lepšie používať práve poslucháčov pre spracovanie udalostí. Našu jednoduchú kalkulačku potom ešte vylepšíme pomocou anonymnej funkcie a ukážeme si, ako aplikáciu správne rozdeliť do viacerých súborov. Docielime tým oddelenie HTML a JavaScript kódu a sprehľadníme tak celkovú štruktúru našej aplikácie.

Poslucháč udalostí

Hoci udalosti typu onclick sú stále funkčné a môžu byť vhodné pre jednoduché účely, ukážeme si ešte druhý spôsob spracovania udalostí. Tlačidlu v ňom pomocou metódy addEventListener() pridáme poslucháča udalostí. Táto metóda umožňuje priradiť viacero obslužných funkcií k rovnakej udalosti na jednom elemente. Tiež môžeme jednému elementu priradiť poslucháča rôznych udalostí (napríklad kliknutie, prejdenie myšou, stlačenie klávesu) a každú z týchto udalostí obslúžiť nejakou funkciou.

V prvom parametri metódy addEventListener() uvádzame názov udalosti a v druhom funkciu, ktorá sa má vykonať.

Najprv si pripomeňme náš pôvodný JavaScript kód:

let elementButton = document.getElementById("button");
let elementNumber1 = document.getElementById("number1");
let elementNumber2 = document.getElementById("number2");

function add() {
    let number1 = parseFloat(elementNumber1.value);
    let number2 = parseFloat(elementNumber2.value);

    alert(number1 + number2);
}

elementButton.onclick = add;

Riadok s obsluhou udalosti kliknutia (elementButton.onclick = add;) teraz prepíšeme nasledovne:

elementButton.addEventListener("click", add);

Funkciu add() tu predávame ako tzv. callback bez zátvoriek.

Aplikácia teraz funguje úplne rovnako, ale spĺňa dobré praktiky. Tlačidlo v budúcnosti môže vyvolávať aj ďalšie udalosti.

Použitie anonymnej funkcie

Pre úplnosť si ešte ukážme, ako možno existujúci kód upraviť s využitím anonymnej funkcie. Funkciu add() teda vymažeme a jej telo presunieme do metódy addEventListener(). Celý skript kalkulačky bude vyzerať takto:

let elementButton = document.getElementById("button");
let elementNumber1 = document.getElementById("number1");
let elementNumber2 = document.getElementById("number2");

elementButton.addEventListener("click", function() {
    let number1 = parseFloat(elementNumber1.value);
    let number2 = parseFloat(elementNumber2.value);

    alert(number1 + number2);
});

Zhrňme si v krátkosti jeho jednotlivé časti:

• document je objekt reprezentujúci celý obsah webovej stránky. V JavaScripte je to vstupný bod pre prácu s DOM.
• getElementById() je metóda objektu document, ktorá vyhľadá a vráti element s konkrétnym id zadaným v parametri. Výsledkom je referencia na konkrétny element na stránke, v našom prípade na tlačidlo pre súčet a dve polia pre zadanie čísel.
• addEventListener() je metóda, ktorá "počúva" konkrétne udalosti, ktoré sa na danom elemente vyskytnú. Ako parameter jej tu zadávame názov udalosti, ktorú chceme sledovať (click), a funkciu, ktorá sa má po kliknutí vykonať.

Externé súbory

JavaScript by sme ideálne nemali v HTML súbore vôbec vidieť, pretože miešanie jazykov v jednom súbore je takmer vždy zlá praktika. Istotne už vieme, že napr. CSS súbory sa píšu samostatne a z HTML sa na ne potom odkazuje. Keď to urobíme rovnako s JavaScriptom, hovoríme o tzv. neobtruzívnom JavaScripte. Týmto výrazom označujeme kód, ktorý v HTML nijako neprekáža, ale je v samostatných súboroch.

Doposiaľ sme pre jednoduchosť písali náš kód v JavaScripte priamo do HTML stránky medzi tagy <script>.

Odteraz budeme JavaScript písať do externého súboru, na ktorý z hlavnej stránky odkážeme.

V priečinku projektu si teda vytvoríme podpriečinok js/, v ňom vytvoríme súbor calculator.js a celý kód pre obsluhu kalkulačky (bez tagov <script>) doňho uložíme. Z HTML ho úplne odstránime. V hlavičke našej stránky potom pridáme nasledujúci riadok, ktorý na skript odkáže:

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

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Simple web calculator</title>
    <script src="js/calculator.js"></script>
</head>

<body>
    <h1>Simple web calculator</h1>
    <input type="text" id="number1" size="5" /> +
    <input type="text" id="number2" size="5" />
    <button id="button">Add!</button>
    <p>
        <a href="https://www.ictdemy.com">
            Learning application from ICTdemy.com
        </a>
    </p>
</body>

</html>

let elementButton = document.getElementById("button");
let elementNumber1 = document.getElementById("number1");
let elementNumber2 = document.getElementById("number2");

elementButton.addEventListener("click", function() {
    let number1 = parseFloat(elementNumber1.value);
    let number2 = parseFloat(elementNumber2.value);

    alert(number1 + number2);
});

Ak teraz vyskúšame našu kalkulačku, zistíme, že sa pri sčítaní čísel nič nedeje. Je to preto, že sa JavaScript spúšťa skôr, než je v HTML načítané tlačidlo a vstupné polia. Výsledkom je chyba:

Problém vyriešime pridaním atribútu defer k nášmu skriptu. Defer zabezpečí, že sa JavaScript spustí až po načítaní celého HTML dokumentu, takže všetky prvky budú k dispozícii. Upravený kód vyzerá takto:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Simple web calculator</title>
    <script src="js/calculator.js" defer></script>
</head>

<body>
    <h1>Simple web calculator</h1>
    <input type="text" id="number1" size="5" /> +
    <input type="text" id="number2" size="5" />
    <button id="button">Add!</button>
    <p>
        <a href="https://www.ictdemy.com">
            Learning application from ICTdemy.com
        </a>
    </p>
</body>

</html>

Teraz už kalkulačka funguje správne.

Udalosť onload

Ďalší spôsob, ako zaistiť, aby mal skript k dispozícii všetky prvky stránky, je vložiť ho tesne pred uzatvárací tag </body> (bez defer). V takom prípade sa skript spustí vo chvíli, keď je HTML (DOM) už načítané, takže tlačidlá a vstupy sú dostupné.

Ak však chceme, aby sa kód spustil až vo chvíli, keď je načítaná celá stránka vrátane obrázkov a štýlov, môžeme využiť udalosť onload, ktorá sa nachádza na objekte window. Tým zaistíme spustenie kódu bez ohľadu na to, v akej časti HTML je vložený. Na obsluhu tejto udalosti znovu využijeme anonymnú funkciu:

window.onload = function() {
    let elementButton = document.getElementById("button");
    let elementNumber1 = document.getElementById("number1");
    let elementNumber2 = document.getElementById("number2");

    elementButton.addEventListener("click", function () {
        let number1 = parseFloat(elementNumber1.value);
        let number2 = parseFloat(elementNumber2.value);

        alert(number1 + number2);
    });
};

Aplikácia funguje rovnako dobre ako predtým. Vďaka použitiu window.onload si teraz môžeme skript pokojne presunúť aj pod začiatok <body> a kód sa napriek tomu spustí až vo chvíli, keď je celá stránka načítaná.

Riešenie pomocou poslucháča udalostí

Aj v tomto prípade možno nahradiť udalosť onload metódou addEventListener(). Ekvivalentný zápis kódu vyššie s využitím poslucháča udalostí potom vyzerá takto:

window.addEventListener("load", function() {
    let elementButton = document.getElementById("button");
    let elementNumber1 = document.getElementById("number1");
    let elementNumber2 = document.getElementById("number2");

    elementButton.addEventListener("click", function() {
        let number1 = parseFloat(elementNumber1.value);
        let number2 = parseFloat(elementNumber2.value);

        alert(number1 + number2);
    });
});

Poslucháčov sme nastavili na udalosť load. Skript sa teda spustí až po načítaní HTML stránky vrátane externých zdrojov, napríklad obrázkov. Pretože zatiaľ v aplikácii žiadne obrázky nemáme, mohli by sme použiť aj udalosť DOMContentLoaded, ktorá čaká iba na načítanie elementov DOM.

Dnešná kalkulačka je ako vždy na stiahnutie v archíve pod lekciou.

V budúcej lekcii, Manipulácia s DOM v JavaScripte, budeme vyberať prvky DOM. Vďaka tomu potom môžeme vytvárať nové prvky, vkladať ich do iných, presúvať, mazať a upravovať.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.