Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky

Domáce Hardware Siete Programovanie Softvér Otázka Systémy

Čo sú udalosti v JavaScripte [vysvetlené príkladmi]

## Udalosti v JavaScripte

Udalosti sú akcie alebo udalosti, ktoré sa dejú vo webovej aplikácii.

Spúšťajú sa interakciami používateľa, ako je kliknutie na tlačidlo, umiestnenie kurzora myši na prvok alebo stlačenie klávesu na klávesnici.

Medzi ďalšie príklady udalostí patrí zmena veľkosti okna, posúvanie dokumentu alebo načítanie stránky.

Udalosti možno použiť na zvýšenie interaktívnosti a odozvy webovej aplikácie poskytovaním spätnej väzby používateľovi a spúšťaním akcií na základe vstupu používateľa.

Spracovanie udalostí v jazyku JavaScript

Na spracovanie udalostí v JavaScripte môžeme použiť prijímače udalostí.

Prijímače udalostí sú funkcie, ktoré sa volajú, keď sa na cieľovom prvku vyskytne špecifická udalosť.

K prvku môžeme pridať poslucháča udalostí pomocou metódy `addEventListener()`.

Prvý argument funkcie `addEventListener()` je názov udalosti a druhý argument je funkcia obsluhy udalosti.

```javascript

const button =document.querySelector('tlačidlo');

// Pridanie poslucháča udalosti pre udalosť 'kliknutie' na tlačidlo

button.addEventListener('click', () => {

console.log('Na tlačidlo bolo kliknuté!');

});

```

Vo vyššie uvedenom príklade pridávame poslucháč udalosti k prvku tlačidla pre udalosť `click`.

Keď používateľ klikne na tlačidlo, spustí sa funkcia obsluhy udalosti a do konzoly sa prihlási správa „Tlačidlo bolo kliknuté!“.

Poslucháčov udalostí môžeme z prvkov odstrániť aj pomocou metódy `removeEventListener()`.

Prvý argument funkcie `removeEventListener()` je názov udalosti a druhý argument je funkcia obsluhy udalosti.

```javascript

button.removeEventListener('click', () => {

console.log('Na tlačidlo bolo kliknuté!');

});

```

Vo vyššie uvedenom príklade odstraňujeme poslucháč udalosti pre udalosť „click“ z prvku button.

To znamená, že funkcia obsluhy udalosti sa už nebude vykonávať, keď používateľ klikne na tlačidlo.

Objekt udalosti

Keď nastane udalosť, objekt nazývaný objekt udalosti je vytvorený.

Objekt udalosti obsahuje informácie o udalosti, ako je cieľový prvok, typ udalosti a poloha myši.

K objektu udalosti môžeme pristupovať vo funkcii obsluhy udalosti pomocou parametra `event`.

```javascript

button.addEventListener('click', (udalosť) => {

console.log(udalosť);

});

```

Vo vyššie uvedenom príklade zaznamenávame objekt udalosti do konzoly.

To nám umožní vidieť informácie o udalosti kliknutia, ako je cieľový prvok, typ udalosti a poloha myši.

Prebublávanie a zachytávanie udalostí

Udalosť prebubláva označuje spôsob, akým sa udalosti šíria cez strom DOM.

Keď nastane udalosť, najprv sa spustí na cieľovom prvku.

Ak cieľový prvok nemá poslucháča udalosti pre udalosť, udalosť prejde do nadradeného prvku.

Toto pokračuje, kým udalosť nedosiahne vrchol stromu DOM.

Zachytenie udalosti je opakom bublania udalostí.

Keď je zapnuté zachytávanie udalostí, udalosti sa najskôr spustia v hornej časti stromu DOM a potom sa šíria nadol k cieľovému prvku.

Zachytávanie udalostí môžeme zapnúť nastavením tretieho parametra metódy `addEventListener()` na hodnotu `true`.

```javascript

button.addEventListener('kliknutie', (udalosť), pravda);

```

Vo vyššie uvedenom príklade zapíname zachytávanie udalostí pre udalosť `click` na prvku button.

To znamená, že udalosť `click` sa najskôr spustí v hornej časti stromu DOM a potom sa rozšíri nadol na prvok tlačidla.

Záver

Udalosti sú základnou súčasťou JavaScriptu a používajú sa na zvýšenie interaktívnosti a odozvy webových aplikácií.

Pochopením toho, ako udalosti fungujú, môžeme vytvárať webové aplikácie, ktoré sú príjemnejšie a užívateľsky prívetivejšie.

Najnovšie články

Copyright © počítačové znalosti Všetky práva vyhradené