Mnoho webových aplikací spoléhá na nějakou formu události, aby vykonávaly své funkce. V určitém okamžiku člověk interaguje s jejich rozhraním, což generuje událost. Tyto člověkem řízené události se obvykle spoléhají na periferní zařízení, jako je myš nebo klávesnice.

Když zařízení vytvoří událost, program na ni může naslouchat, aby věděl, kdy má provést konkrétní chování. V tomto tutoriálu se dozvíte, jak naslouchat událostem pomocí JavaScriptu.

Co je událostmi řízené programování?

Událostí řízené programování je název paradigmatu, které se při plnění svých funkcí spoléhá na provedení události. Je možné vytvořit událostmi řízený program v jakémkoli programovacím jazyce na vysoké úrovni. Programování řízené událostmi je však nejběžnější v jazycích, jako je JavaScript, které se integrují s uživatelským rozhraním.

Co je to posluchač událostí?

Posluchač událostí je funkce, která spouští předdefinovaný proces, pokud dojde ke konkrétní události. Posluchač událostí tedy „naslouchá“ akci a poté zavolá funkci, která provádí související úkol. Tato událost může mít jednu z mnoha podob. Mezi běžné příklady patří události myši, události klávesnice a události okna.

Vytvoření posluchače událostí pomocí JavaScriptu

Události můžete poslouchat na libovolném místě prvek v DOM. JavaScript má addEventListener() funkci, kterou můžete volat na jakýkoli prvek na webové stránce. The addEventListener() funkce je metoda EventTarget rozhraní. Všechny objekty, které podporují události, implementují toto rozhraní. To zahrnuje okno, dokument a jednotlivé prvky na stránce.

Funkce addEventListener() má následující základní strukturu:

element.addEventListener("událost", functionToExecute);

Kde:

• a živel může reprezentovat jakýkoli HTML tag (od tlačítka po odstavec)
• a "událost" je řetězec pojmenující konkrétní, rozpoznanou akci
• a functionToExecute je odkaz na existující funkci

Vytvořme následující webovou stránku, která má několik prvků HTML:

Vítejte


 Dobrý den, vítejte na mém webu.


Zjistěte více





Uživatelské informace

Uživatelské jméno: 

Předložit

Výše uvedený HTML kód vytvoří jednoduchou stránku, která odkazuje na soubor JavaScriptu s názvem app.js. The app.js soubor bude obsahovat kód pro nastavení posluchačů událostí. Pokud tedy chcete zahájit konkrétní proces, kdykoli uživatel klikne na první tlačítko na webové stránce, je to soubor, ve kterém jej vytvoříte.

Soubor app.js

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

Výše uvedený JavaScript kód přistupuje k prvnímu tlačítku na stránce pomocí querySelector() funkce. Poté k tomuto prvku přidá posluchač události pomocí addEventListener() metoda. Konkrétní událost, kterou poslouchá, má název „click“. Když tlačítko spustí tuto událost, posluchač zavolá clickDemo() funkce.

Příbuzný: Naučte se používat selektory DOM

The clickDemo() funkce vypíše „Ahoj“ do konzole prohlížeče. Pokaždé, když kliknete na tlačítko, měli byste vidět tento výstup ve vaší konzoli.

Výstup události „kliknutím“.

Co jsou události myši?

JavaScript má a MouseEvent rozhraní, které představuje události, ke kterým dochází v důsledku interakce uživatele s myší. Několik událostí používá MouseEvent rozhraní. Tyto události zahrnují následující:

• klikněte
• dblclick
• pohyb myši
• přejet myší
• mouseout
• mouseup
• pohyb myši

The klikněte událost nastane, když uživatel stiskne a uvolní tlačítko myši, když je jeho ukazatel nad prvkem. To je přesně to, co se stalo v předchozím příkladu. Jak můžete vidět z výše uvedeného seznamu, události myši mohou mít mnoho podob.

Další běžnou událostí myši je dblclick, což znamená dvojité kliknutí. To se spustí, když uživatel dvakrát rychle za sebou klikne na tlačítko myši. Pozoruhodná věc o addEventListener() Funkce spočívá v tom, že ji můžete použít k přiřazení více posluchačů událostí k jednomu prvku.

Přidání události dblclick k prvnímu tlačítku

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Toto je ukázka toho, jak vytvořit událost dvojitého kliknutí")
}

Přidáním výše uvedeného kódu do souboru app.js efektivně vytvoříte druhý posluchač události pro první tlačítko na webové stránce. Takže dvojitým kliknutím na první tlačítko vytvoříte v prohlížeči následující upozornění:

Na obrázku výše uvidíte vygenerované upozornění a také uvidíte, že v konzole jsou další dva výstupy „Ahoj“. Je to proto, že událost poklepání je kombinací dvou událostí kliknutí a pro obě existují posluchače událostí klikněte a dblclick Události.

Názvy ostatních událostí myši v seznamu popisují jejich chování. The pohyb myši událost nastane pokaždé, když uživatel pohne myší, když je kurzor nad prvkem. The mouseup událost nastane, když uživatel podrží tlačítko nad prvkem a poté jej uvolní.

Co jsou události klávesnice?

JavaScript má a KeyboardEvent rozhraní. To naslouchá interakcím mezi uživatelem a jeho klávesnicí. V minulosti, KeyboardEvent měl tři typy událostí. JavaScript však od té doby zastaral stisknutí klávesy událost.

Takže klíčování a keydown události jsou jediné dvě doporučené události klávesnice, které jsou vše, co potřebujete. The keydown událost nastane, když uživatel stiskne klávesu a klíčování událost nastane, když ji uživatel uvolní.

Když se vrátíme k výše uvedenému příkladu HTML, nejlepší místo pro přidání posluchače událostí klávesnice je na vstup živel.

Přidání posluchače událostí klávesnice do souboru app.js

nech pozdravy = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Ahoj ${e.target.value}, vítejte na mém webu.`)
}

Výše uvedený kód používá querySelector() funkce pro přístup k odstavci a vstup prvky na stránce. Poté zavolá addEventListener() metoda na vstup prvek, který naslouchá klíčování událost. Kdykoli a klíčování dojde k události, captureInput() funkce převezme hodnotu klíče a přidá ji do odstavce na stránce. The E parametr představuje událost, kterou JavaScript přiřadí automaticky. Tento objekt události má vlastnost target, což je odkaz na prvek, se kterým uživatel interagoval.

V tomto příkladu štítek připojený k vstup pole vyžaduje uživatelské jméno. Pokud zadáte své jméno do vstupního pole, bude webová stránka vypadat asi takto:

Odstavec nyní obsahuje vstupní hodnotu, která je ve výše uvedeném příkladu „Jane Doe“.

addEventListener zachycuje všechny druhy uživatelské interakce

Tento článek vás seznámil s addEventListener() metoda a také několik událostí myši a klávesnice, které s ní můžete použít. V tomto okamžiku víte, jak naslouchat konkrétní události a jak vytvořit funkci, která na ni reaguje.

The addEventListener poskytuje však další možnosti prostřednictvím svého třetího parametru. Můžete jej použít k řízení šíření událostí: pořadí, ve kterém se události přesouvají z prvků ke svým rodičům nebo dětem.

Pochopení šíření událostí v JavaScriptu

Události jsou výkonnou funkcí JavaScriptu. Pochopení toho, jak je webový prohlížeč staví proti prvkům, je klíčem ke zvládnutí jejich používání.

Přečtěte si další

O autorovi