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

V minulej lekcii, Základy práce s DOM a udalosti v JavaScriptu, sme začali tou najčastejšie používanou 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 udalostiami. 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 prehľ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ť viac obslužných funkcií k rovnakej udalosti na jednom elemente. Rovnako môžeme jednému elementu priradiť poslucháča rôznych udalostí (napríklad kliknutie, prejdenie myšou, stlačenie klávesy) 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 na nasledujúce:

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

Ukážme si ešte pre úplnosť, 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 pole 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>.

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

V zložke projektu si teda teraz vytvoríme podložku js/, v nej vytvoríme súbor calculator.js a celý kód pre obsluhu kalkulačky (bez tagov <script>) do nej 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);
});

Udalosť onload

Skripty sa niekedy alternatívne vkladajú tiež tesne pred uzatvárací tag </body>. Skript sa tak spúšťa až vo chvíli, keď je stránka kompletne načítaná. Rovnakého výsledku dosiahneme pomocou udalosti onload, ktorá sa nachádza na objekte window. Upravíme náš kód tak, aby sa spustil práve po načítaní stránky bez ohľadu na to, v akej časti stránky je vložený. K obsluhe udalostí využijeme znova 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. Môžeme si skúsiť skript presunúť napríklad pod začiatok <body> a uvidíme, že sa kód 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ť prvky nové, 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š.