Mnoho webových aplikácií sa pri vykonávaní svojich funkcií spolieha na nejakú formu udalosti. V určitom bode človek interaguje s ich rozhraním, čo generuje udalosť. Tieto človekom riadené udalosti sa zvyčajne spoliehajú na periférne zariadenie, ako je myš alebo klávesnica.

Keď zariadenie vytvorí udalosť, program ju môže počúvať, aby vedel, kedy má vykonať konkrétne správanie. V tomto návode sa naučíte, ako počúvať udalosti pomocou JavaScriptu.

Čo je programovanie riadené udalosťami?

Udalosťou riadené programovanie je názov paradigmy, ktorá sa pri vykonávaní svojich funkcií spolieha na vykonanie udalosti. Je možné vytvoriť program riadený udalosťami v akomkoľvek vysokoúrovňovom programovacom jazyku. Programovanie riadené udalosťami je však najbežnejšie v jazykoch ako JavaScript, ktoré sa integrujú s používateľským rozhraním.

Čo je to poslucháč udalostí?

Poslucháč udalostí je funkcia, ktorá spustí preddefinovaný proces, ak nastane špecifická udalosť. Poslucháč udalostí teda „počúva“ akciu a potom zavolá funkciu, ktorá vykonáva súvisiacu úlohu. Táto udalosť môže mať jednu z mnohých podôb. Bežné príklady zahŕňajú udalosti myši, udalosti klávesnice a udalosti okna.

Vytvorenie prijímača udalostí pomocou JavaScriptu

Udalosti môžete počúvať na ktorejkoľvek prvok v DOM. JavaScript má addEventListener() funkciu, ktorú môžete vyvolať na ľubovoľnom prvku na webovej stránke. The addEventListener() funkcia je metóda EventTarget rozhranie. Všetky objekty, ktoré podporujú udalosti, implementujú toto rozhranie. To zahŕňa okno, dokument a jednotlivé prvky na stránke.

Funkcia addEventListener() má nasledujúcu základnú štruktúru:

element.addEventListener("udalosť", functionToExecute);

Kde:

• a element môže reprezentovať akúkoľvek značku HTML (od tlačidla po odsek)
• a "udalosť" je reťazec, ktorý pomenúva konkrétnu, rozpoznanú akciu
• a functionToExecute je odkaz na existujúcu funkciu

Vytvorme nasledujúcu webovú stránku, ktorá má niekoľko HTML prvkov:

Vitajte


 Dobrý deň, vitajte na mojej stránke.


Uč sa viac





Informácie o používateľovi

Používateľské meno: 

Predložiť

Vyššie uvedený kód HTML vytvorí jednoduchú stránku, ktorá odkazuje na súbor JavaScript s názvom app.js. The app.js súbor bude obsahovať kód na nastavenie poslucháčov udalostí. Ak teda chcete spustiť špecifický proces vždy, keď používateľ klikne na prvé tlačidlo na webovej stránke, toto je súbor, v ktorom ho vytvoríte.

Súbor app.js

document.querySelector('.btn').addEventListener("click", clickDemo)
function clickDemo(){
 console.log("Ahoj")
}

Kód JavaScript uvedený vyššie pristupuje k prvému tlačidlu na stránke pomocou querySelector() funkciu. Potom k tomuto prvku pridá poslucháča udalostí pomocou addEventListener() metóda. Konkrétna udalosť, ktorú počúva, má názov „click“. Keď tlačidlo spustí túto udalosť, poslucháč zavolá clickDemo() funkciu.

Súvisiace: Zistite, ako používať selektory DOM

The clickDemo() funkcia vypíše „Ahoj“ do konzoly prehliadača. Zakaždým, keď kliknete na tlačidlo, mali by ste vidieť tento výstup vo vašej konzole.

Výstup udalosti „kliknutím“.

Čo sú udalosti s myšou?

JavaScript má a MouseEvent rozhranie, ktoré predstavuje udalosti, ku ktorým dochádza v dôsledku interakcie používateľa s myšou. Viaceré udalosti využívajú MouseEvent rozhranie. Medzi tieto udalosti patria:

• kliknite
• dblclick
• pohyb myšou
• prejdenie myšou
• mouseout
• mouseup
• myšou

The kliknite udalosť nastane, keď používateľ stlačí a uvoľní tlačidlo myši, keď je jeho ukazovateľ nad prvkom. To je presne to, čo sa stalo v predchádzajúcom príklade. Ako môžete vidieť z vyššie uvedeného zoznamu, udalosti myši môžu mať mnoho podôb.

Ďalšou bežnou udalosťou myši je dblclick, čo znamená dvojité kliknutie. Toto sa spustí, keď používateľ dvakrát rýchlo za sebou klikne na tlačidlo myši. Pozoruhodná vec o addEventListener() funkciou je, že ju môžete použiť na priradenie viacerých poslucháčov udalostí k jednému prvku.

Pridanie udalosti dblclick k prvému tlačidlu

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Toto je ukážka toho, ako vytvoriť udalosť dvojitého kliknutia")
}

Pridaním vyššie uvedeného kódu do súboru app.js efektívne vytvoríte druhý prijímač udalostí pre prvé tlačidlo na webovej stránke. Takže dvojitým kliknutím na prvé tlačidlo vytvoríte v prehliadači nasledujúce upozornenie:

Na obrázku vyššie uvidíte vygenerované upozornenie a tiež uvidíte, že v konzole sú ďalšie dva výstupy „Ahoj“. Je to preto, že udalosť dvojitého kliknutia je kombináciou dvoch udalostí kliknutia a pre obe udalosti existujú prijímače udalostí kliknite a dblclick diania.

Názvy ostatných udalostí myši v zozname popisujú ich správanie. The pohyb myšou udalosť nastane vždy, keď používateľ pohne myšou, keď je kurzor nad prvkom. The mouseup udalosť nastane, keď používateľ podrží tlačidlo nad prvkom a potom ho uvoľní.

Čo sú udalosti klávesnice?

JavaScript má a KeyboardEvent rozhranie. Toto počúva interakcie medzi používateľom a jeho klávesnicou. V minulosti, KeyboardEvent mali tri typy udalostí. JavaScript však odvtedy zastaral stlačenie klávesy udalosť.

Takže klávesnica a keydown udalosti sú jediné dve odporúčané udalosti klávesnice, ktoré sú všetko, čo potrebujete. The keydown udalosť nastane, keď používateľ stlačí kláves a klávesnica udalosť nastane, keď ju používateľ uvoľní.

Pri opätovnom navštívení vyššie uvedeného príkladu HTML je najlepším miestom na pridanie prijímača udalostí klávesnice na vstup element.

Pridanie prijímača udalostí klávesnice do súboru app.js

nech pozdravy = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Ahoj ${e.target.value}, vitajte na mojej webovej stránke.`)
}

Vyššie uvedený kód používa querySelector() funkciu pre prístup k odseku a vstup prvky na stránke. Potom zavolá addEventListener() metóda na vstup prvok, ktorý počúva na klávesnica udalosť. Kedykoľvek a klávesnica dôjde k udalosti, captureInput() funkcia prevezme hodnotu kľúča a pridá ju do odseku na stránke. The e parameter predstavuje udalosť, ktorú JavaScript priraďuje automaticky. Tento objekt udalosti má vlastnosť target, ktorá je odkazom na prvok, s ktorým používateľ interagoval.

V tomto príklade štítok pripojený k vstup pole vyžaduje používateľské meno. Ak do vstupného poľa zadáte svoje meno, webová stránka bude vyzerať asi takto:

Odsek teraz obsahuje vstupnú hodnotu, ktorá je vo vyššie uvedenom príklade „Jane Doe“.

addEventListener zachytáva všetky druhy interakcií používateľov

Tento článok vám predstavil addEventListener() metódu, ako aj niekoľko udalostí myši a klávesnice, ktoré s ňou môžete použiť. V tomto bode viete, ako počúvať konkrétnu udalosť a ako vytvoriť funkciu, ktorá na ňu reaguje.

The addEventListener poskytuje extra schopnosť, avšak prostredníctvom svojho tretieho parametra. Môžete ho použiť na riadenie šírenia udalostí: poradie, v ktorom sa udalosti presúvajú z prvkov k ich rodičom alebo deťom.

Pochopenie šírenia udalostí v JavaScripte

Udalosti sú výkonnou funkciou JavaScriptu. Pochopenie toho, ako ich webový prehliadač stavia proti prvkom, je kľúčom k zvládnutiu ich používania.

Prečítajte si ďalej

O autorovi