Spracovanie udalostí je dôležitý koncept v JavaScripte. Udalosti umožňujú, aby boli stránky HTML dynamické a interaktívne, čo vám umožňuje vytvárať atraktívne používateľské rozhrania. Môžete napísať kód na spustenie JavaScriptu, keď sa na DOM vyskytne udalosť.
Udalosťou môže byť, keď používateľ klikne na prvok HTML, načíta sa stránka alebo keď sa zmení hodnota vstupného poľa. Môžete napísať kód, ktorý zmení štruktúru HTML, keď nastane udalosť. Naučte sa tri rôzne spôsoby, ako môžete do kódu pridať poslucháčov udalostí.
1. Metóda addEventListener
Metóda addEventListener je jednou z populárnych metódy poslucháča udalostí. Má tri parametre:
- Objekt reprezentujúci udalosť.
- Funkcia, ktorá to zvládne.
- Voliteľná logická hodnota useCapture, ktorá popisuje, ako sa udalosť šíri v DOM.
Udalosťou môže byť ľubovoľná špecifikovaná udalosť DOM na cieľovom prvku. Funkcia je nastavená tak, aby reagovala na túto udalosť, keď nastane.
Funkcia môže byť anonymná alebo pomenovaná funkcia. Medzi obľúbené ciele patrí prvok, jeho potomkovia, dokument a okno, ktoré podporuje udalosť.
AddEventListener() je odporúčaná metóda na spravovanie poslucháčov udalostí v JavaScripte. Funguje na ľubovoľnom cieli udalosti, nielen na prvkoch HTML, a podporuje viaceré obslužné programy udalostí.
Možno budete chcieť spustiť nejaký kód na DOM. Keď používateľ klikne na tlačidlo, môžete tlačiť text, vykonávať výpočty alebo zobraziť obrázok.
Ukážme si to nasledujúcim kódom:
html>
<html>
<telo>
<h1>Metóda addEventListener s funkciamih1>
<tlačidloid="myBtn">Kliknite tutlačidlo>
<pid="demo">p>
telo>
html>Potom pridajte poslucháč udalostí pomocou tlačidla.
konšt prvok = dokument.getElementById("myBtn");
element.addEventListener("klik", mojaFunkcia1);
funkciumyFunction1() {
dokument.getElementById("demo").innerHTML += „Funkcia vykonaná! "
}
Keď kliknete na tlačidlo, na obrazovke sa vytlačí text „Function Executed“, ako je znázornené nižšie.
2. Delegovanie udalostí na addEventListener
Delegovanie udalosti v JavaScripte je vzor používaný na spracovanie viacerých udalostí. Namiesto pridania poslucháča udalosti ku každému prvku pridáte poslucháča udalosti iba k prvku predchodcu. K prvku, ktorý spustil udalosť, sa dostanete cez .cieľ vlastnosť objektu udalosti.
To zaisťuje, že všetky prvky, na ktoré sa zameriavate, majú spoločné správanie. Bez toho by ste museli ku každému manuálne pridať poslucháča udalostí.
Tu je príklad delegovania udalosti:
html>
<html>
<telo>
<h1> Delegovanie udalostí na tlačidláchh1>
<div>
<tlačidlo>Tlačidlo 1tlačidlo>
<tlačidlo>Tlačidlo 2tlačidlo>
<tlačidlo>Tlačidlo 3tlačidlo>
div>
telo>
html>
Potom pridajte poslucháčov udalostí ku všetkým tlačidlám pomocou niekoľkých riadkov kódu.
konšt div = dokument.querySelector('div')div.addEventListener("klik", (udalosť) => {
ak (event.target.tagName 'BUTTON') {
konzoly.log(„Kliknutie na tlačidlo“)
}
});
Delegovanie udalostí je vzor založený na prebublávaní udalostí. Prebublávanie udalosti nastáva, keď prvok prijme udalosť a odošle ju svojim nadradeným a predchodcom v DOM. Je to propagácia udalosti koncept, ktorý sa štandardne deje v JavaScripte.
3. Pomocou atribútu onclick
Atribút onclick môžete použiť na spustenie JavaScriptu, keď používatelia kliknú na prvok. Podobne ako metódu addEventListener môžete použiť metódu onclick na tlač textu, vykonávanie výpočtov a zmenu funkcií prvkov na DOM.
Prijímač udalosti onclick môžete pridať ako obslužný program udalosti v riadku do prvku HTML. Udalosť nastane, keď používateľ klikne na prvok. Zmeňte farbu nasledujúceho odseku dynamicky pomocou metódy onclick:
html>
<html>
<telo>
<h1> Spustiť udalosti onClickh1>
<pid="demo"po kliknutí="myFunction()">
Kliknutím na mňa zmeníte farbu textu.
p>
telo>
html>Do súboru JavaScript pridajte nasledujúci kód:
funkciumyFunction() {
dokument.getElementById("demo").štýl.farba = "červená";
}Výstup sa zobrazí takto:
Prečo sa učiť o poslucháčoch udalostí?
Ako vývojár JavaScriptu budete v projektoch často využívať poslucháčov udalostí. Pomocou poslucháčov udalostí môžete vytvoriť množstvo funkcií vrátane prebublávania a zachytávania udalostí. Pochopenie týchto konceptov vám uľahčí vytváranie dynamických rozhraní vo vašich aplikáciách.