Zpracování událostí je důležitý koncept v JavaScriptu. Události umožňují, aby stránky HTML byly dynamické a interaktivní, což vám umožní vytvářet atraktivní uživatelská rozhraní. Můžete napsat kód pro spuštění JavaScriptu, když dojde k události na DOM.
Událostí může být, když uživatel klikne na prvek HTML, načte se stránka nebo když se změní hodnota vstupního pole. Můžete napsat kód, který změní strukturu HTML, když dojde k události. Naučte se tři různé způsoby, jak můžete do kódu přidat posluchače událostí.
1. Metoda addEventListener
Metoda addEventListener je jednou z populárních metody posluchače událostí. Má tři parametry:
- Objekt představující událost.
- Funkce, která to zvládne.
- Volitelná logická hodnota useCapture, která popisuje, jak se událost šíří v DOM.
Událostí může být jakákoli zadaná událost DOM na cílovém prvku. Funkce je nastavena tak, aby reagovala na tuto událost, když nastane.
Funkce může být anonymní nebo pojmenovaná. Mezi oblíbené cíle patří prvek, jeho potomci, dokument a okno, které podporuje událost.
AddEventListener() je doporučená metoda pro správu posluchačů událostí v JavaScriptu. Funguje na libovolném cíli události, nejen na prvcích HTML, a podporuje více obslužných rutin událostí.
Možná budete chtít spustit nějaký kód na DOM. Když uživatel klikne na tlačítko, můžete tisknout text, provádět výpočty nebo zobrazit obrázek.
Ukažme si to následujícím kódem:
html>
<html>
<tělo>
<h1>Metoda addEventListener s funkcemih1>
<knoflíkid="myBtn">Klikněte zdeknoflík>
<pid="demo">p>
tělo>
html>Poté pomocí tlačítka přidejte posluchač události.
konst prvek = dokument.getElementById("myBtn");
element.addEventListener("kliknout", mojeFunkce1);
funkcemyFunction1() {
dokument.getElementById("demo").vnitřníHTML += „Funkce provedena! "
}
Po kliknutí na tlačítko se na obrazovce vytiskne text „Function Executed“, jak je znázorněno níže.
2. Delegování událostí na addEventListener
Delegování události v JavaScriptu je vzor používaný ke zpracování více událostí. Namísto přidání posluchače události ke každému prvku přidáte posluchač události pouze k prvku předka. K prvku, který událost spustil, můžete přistupovat pomocí .cílová vlastnost objektu události.
To zajišťuje, že všechny prvky, na které cílíte, mají sdílené chování. Bez něj byste museli ke každému ručně přidat posluchače událostí.
Zde je příklad delegování události:
html>
<html>
<tělo>
<h1> Delegování událostí na tlačítkáchh1>
<div>
<knoflík>Tlačítko 1knoflík>
<knoflík>Tlačítko 2knoflík>
<knoflík>Tlačítko 3knoflík>
div>
tělo>
html>
Poté přidejte posluchače událostí ke všem tlačítkům pomocí pouhých několika řádků kódu.
konst div = dokument.querySelector('div')div.addEventListener("kliknout", (událost) => {
-li (event.target.tagName 'KNOFLÍK') {
řídicí panel.log('Kliknutí na tlačítko')
}
});
Delegování událostí je vzor založený na probublávání událostí. K bublání událostí dochází, když prvek přijme událost a předá ji svým nadřazeným a předchůdcům v DOM. Je to an propagace události koncept, který se standardně děje v JavaScriptu.
3. Pomocí atributu onclick
Atribut onclick můžete použít ke spuštění JavaScriptu, když uživatelé kliknou na prvek. Stejně jako metodu addEventListener můžete použít metodu onclick k tisku textu, provádění výpočtů a změně funkcí prvků na DOM.
Posluchač události onclick můžete přidat jako obslužnou rutinu události vložené do prvku HTML. K události dojde, když uživatel klikne na prvek. Změňte barvu následujícího odstavce dynamicky pomocí metody onclick:
html>
<html>
<tělo>
<h1> Spustit události onClickh1>
<pid="demo"při kliknutí="myFunction()">
Kliknutím na mě změníte barvu textu.
p>
tělo>
html>Do souboru JavaScript přidejte následující kód:
funkcemyFunction() {
dokument.getElementById("demo").styl.barva = "Červené";
}Výstup se zobrazí takto:
Proč se učit o posluchačích událostí?
Jako vývojář JavaScriptu budete často v projektech používat posluchače událostí. Pomocí posluchačů událostí můžete vytvořit řadu funkcí, včetně probublávání a zachycování událostí. Pochopení těchto konceptů vám usnadní vytváření dynamických rozhraní ve vašich aplikacích.