Jak používat addEventListener ke zpracování událostí - užitečné tipy

Pro vytváření interaktivity na webových stránkách často používáme JavaScript. Jedním z nejběžnějších způsobů zpracování událostí, jako jsou kliknutí myší, stisknutí kláves a další, je použití metody addEventListener. Tato metoda nám umožňuje propojit funkce obslužných rutin s určitými událostmi, které se na stránce dějí.

addEventListener má několik výhod oproti jiným způsobům zpracování událostí. Za prvé, jeho použití nám umožňuje propojit více psovodů se stejnou událostí, což přináší větší flexibilitu a pohodlí při vývoji. Za druhé, tato metoda nám umožňuje snadno odstranit obslužné rutiny událostí, pokud je již nepotřebujete.

Pro použití addEventListener musíme zadat konkrétní položku, na které chceme sledovat události, a poté zadat typ události a funkci obslužného programu. Funkce obslužného programu bude spuštěna, když se na položce objeví uvedená událost. Můžeme například použít následující kód:

V tomto příkladu přiřadíme funkci obslužné rutiny k události kliknutí na prvek s proměnnou element. Když uživatel klikne na položku, funkce obslužná rutina bude spuštěna a spuštěna.

Přidání posluchače událostí do položky

Pro zpracování událostí na webové stránce můžeme použít metodu addEventListener (). Tato metoda nám umožňuje přidat posluchače událostí na konkrétní položku, abychom zachytili určité akce uživatele nebo změny v položce.

Syntaxe metody addEventListener() je následující:

element.addEventListener(event, function, useCapture);

event: toto je řádek, který představuje typ události, ke které je třeba přidat posluchače. Například" click"," mouseover"," keyup " atd.

function: jedná se o funkci, která bude vyvolána, když dojde k uvedené události. Funkce může být již oznámená nebo anonymní.

useCapture: jedná se o bulovou hodnotu, která určuje, zda má být posluchač spuštěn ve fázi zachycení události nebo ve fázi vyskakování. Obvykle se používá hodnota false, aby se posluchač spustil ve fázi vyskakování , ale můžeme také nastavit hodnotu true, aby se posluchač spustil ve fázi odposlechu.

Zvažte příklad použití metody addEventListener () k přidání posluchače události "click" na tlačítko:

var button = document.querySelector("#myButton");button.addEventListener("click", function() );

Ve výše uvedeném příkladu vybereme položku s identifikátorem " myButton "a přidáme posluchače události"click". Když uživatel klikne na tlačítko, funkce uvnitř posluchače se vyvolá a provede zadaný kód zpracování kliknutí.

Použití metody addEventListener () nám umožňuje flexibilně přizpůsobit zpracování událostí v našem kódu a snadno přidávat nebo odebírat posluchače v závislosti na potřebách aplikace.

Výběr typu události ke zpracování

Při použití metody addEventListener pro zpracování událostí je důležité správně vybrat typ události, se kterou je třeba pracovat. V HTML existuje mnoho různých typů událostí a každý z nich může být užitečný v určitém kontextu.

Události myši:

Události myši jako click, mouseover a mouseout, lze použít k reakci na akce uživatele pomocí myši. Můžete například použít událost click pro vyvolání určité funkce kliknutím na tlačítko nebo odkaz.

Události klávesnice:

Události klávesnice jako keydown a keyup, lze použít k reakci na stisky kláves na klávesnici. Můžete například použít událost keydown Chcete-li spustit konkrétní funkci stisknutím určité klávesy, jako je "Enter".

Události formulářů:

Události forem, jako jsou submit, mohou být použity k provádění určitých akcí při odesílání formuláře. Můžete například použít událost submit Chcete-li zkontrolovat data zadaná uživatelem před odesláním formuláře na server.

Události stahování:

Události stahování, jako jsou load a DOMContentLoaded, lze použít k provádění určitých akcí po načtení webové stránky nebo jejích částí. Můžete například použít událost load Chcete-li spustit konkrétní funkci, když jsou všechny obrázky na stránce plně načteny.

Je důležité vybrat správný typ události, který odpovídá tomu, čeho chcete dosáhnout při použití addeventlisteneru. Podívejte se na dokumentaci o typech událostí a vyberte tu nejvhodnější pro váš případ.

Použití obslužné funkce k provádění akcí

Chcete-li použít funkci obslužné rutiny, musíte nejprve vytvořit funkci, která provede potřebné kroky, když se událost spustí. Funkce může například změnit styl položky, přidat nebo odebrat třídy, odesílat data na server nebo provádět jakoukoli jinou potřebnou operaci.

Jakmile je funkce obslužné rutiny definována, může být připojena k prvku pomocí metody addEventListener. Jako argumenty se předává název události a samotná funkce je obslužná. Například:

Nyní, když kliknete na položku, funkce myFunction bude povolána a provede potřebné kroky.

Je důležité poznamenat, že funkci obslužného programu lze definovat přímo uvnitř metody addEventListener, aniž by došlo k vytvoření samostatné funkce. To může být užitečné, pokud je obslužná rutina potřeba pouze na jednom místě kódu a není použita nikde jinde. Například:

V takovém případě není vyžadován název funkce a obslužná rutina bude provedena přímo v případě události.

Použití obslužné funkce umožňuje vytvářet dynamické chování pro položky na stránce. Například když umístíte kurzor na položku, můžete změnit její barvu, kliknutím můžete otevřít vyskakovací okno s dalšími informacemi nebo odeslat data na server pro uložení.

Kromě toho může být obslužná funkce použita k ověření různých podmínek před provedením akce. Například kliknutím na tlačítko můžete zkontrolovat, zda jsou povinná pole formuláře vyplněna, a poté odeslat data pouze v případě úspěšné validace.

Použití obslužné funkce spolu s addeventlistenerem umožňuje vytvářet interaktivní a citlivé webové aplikace, které mohou reagovat na akce uživatele a provádět nezbytné kroky, aby bylo zajištěno správné fungování a použitelnost.

Možnosti event v obslužné funkci

Když přidáme obslužnou rutinu události přes addEventListener, funkce obslužná rutina přijme možnost event . Tento parametr je objekt, který obsahuje informace o události, která se stala.

Možnost event lze použít k získání různých údajů o události, například:

• event.target - prvek, na kterém se událost stala;
• event.type - typ události;
• event.clientX a event.clientY - souřadnice kurzoru myši v okamžiku události;
• event.key - kód klávesy, která byla stisknuta;
• event.preventDefault() - zabraňuje standardní akci související s událostí;
• a mnoho dalších.

Pomocí možností event můžeme získat potřebné informace o události a provést určité kroky ve funkci obslužné rutiny. Můžete například změnit styl položky, přidat nebo odebrat třídy, odeslat data na server atd.

Odstranění posluchače událostí

K odstranění posluchače událostí přidaného pomocí metody addEventListener () je nutné použít metodu removeEventListener (). Tato metoda umožňuje odstranit posluchače zadaného při přidávání a zastavit zpracování událostí.

Syntaxe metody removeEventListener() je následující:

Příklad použití metody removeEventListener () k odstranění posluchače:

console.log ("kliknutí na položku");

// Přidání posluchače událostí na položky

// Odstranění posluchače událostí

Ve výše uvedeném příkladu se nejprve vytvoří funkce-handleclick posluchač (), která se vyvolá kliknutím na položku. Poté pomocí metody addEventListener () je posluchač přidán do položky s identifikátorem "myButton".

Chcete-li odstranit posluchače událostí, je povolána metoda removeEventListener() se stejnými parametry jako při přidávání posluchače. V tomto případě se jedná o typ události "click" a název poslechové funkce "handleClick".

Po provedení metody removeEventListener () bude posluchač odstraněn a přestane se vyvolávat kliknutím na položku "myButton".

Aplikace event delegation pro efektivní zpracování událostí

Výhodou použití event delegation je, že umožňuje snížit počet obslužných rutin událostí v kódu a snížit složitost jejich správy. Když přidáte nebo odstraníte položky z Dom struktury, nemusíte pokaždé spojovat obslužné rutiny s novými položkami nebo je odstraňovat z odstraněných položek.

Jednou z nejběžnějších aplikací event delegation je zpracování kliknutí na položky seznamu nebo tabulky. Namísto přichycení obslužné rutiny ke každé položce v seznamu nebo buňce tabulky je možné přiřadit obslužnou rutinu události k nadřazené položce a použít delegování událostí k určení položky, na kterou bylo kliknutí provedeno.

Můžete například použít delegování událostí k reakci na kliknutí na položky tabulky:

const table = document.getElementById('myTable');

const target = event.target;

if (target.tagName === 'TD')

// Zpracování kliknutí na buňku tabulky

V tomto případě je zpracovatel události vázán na položku 'table `a delegování událostí probíhá na základě ověření' event.target', aby odpovídala požadovanému prvku (v tomto případě buňce `td`).

Použití event delegation usnadňuje zpracování událostí v situacích, kdy může být prvků událostí mnoho nebo kdy jsou položky přidány nebo odstraněny z DOM dynamicky. Pomáhá také vyhnout se problémům s pamětí a výkonem spojeným s vázáním příliš velkého počtu psovodů v kódu.

Použití metody preventDefault ke zrušení standardního chování

Použití metody preventDefault je poměrně jednoduché. Pro začátek, událost musí být převedena do funkce-obslužná rutina jako parametr. Vyvolání metody preventDefault na této události pak pomůže zrušit standardní chování. Vezměme si například následující příklad:

const link = document.querySelector('.link');link.addEventListener('click', function(event) );

V tomto příkladu vybereme položku s třídou "link" a přidáme k ní posluchače událostí click. Když uživatel klikne na odkaz, zavolá se obslužná funkce, ve které na události vyvoláme metodu preventDefault. V důsledku toho bude odkaz zrušen a uživateli se zobrazí vyskakovací okno se zprávou. Tímto způsobem můžeme zabránit standardnímu chování prvku a provádět vlastní akce.

Metoda preventDefault je velmi užitečná při práci s formami. Například pro validaci zadaných dat nebo odeslání formuláře na asynchronní žádost. Díky této metodě můžeme sledovat chování formy a předcházet nežádoucím účinkům.

Použití metody stopPropagation k zastavení vyskakování události

Když se na prvku stane událost, objeví se z podřízených prvků na rodičovské. To znamená, že pokud máte vnořené prvky a událost se stane na nejvzdálenější položce, bude převedena na rodičovské a rodičovské rodičovské prvky a tak dále. Někdy však možná budete muset zabránit tomuto vyskakování a zpracovat událost pouze na samotném vnořeném prvku.

Chcete-li použít metodu stopPropagation() , musíte se nejprve ujistit, že je váš obslužný program událostí připojen k položce, na které chcete zastavit vyskakování, nikoli k jeho nadřazeným prvkům.

Příklad kódu ukazuje, jak použít metodu stopPropagation() k zastavení vyskakování události při kliknutí na řádek tabulky:

Строка 1
Строка 2
Строка 3

Použití metody stopPropagation () je výkonným nástrojem pro správu zpracování událostí a umožňuje přesně určit, na které prvky se akce při události vztahují.

Použití delegování událostí pro dynamicky vytvořené prvky

Existuje však řešení tohoto problému-použití delegování událostí. Vytvořením obslužného programu události na dřívějším (nebo statickém) nadřazeném prvku můžeme poslouchat události na dynamicky vytvořených prvcích, i když se objeví v DOM později. Namísto vytvoření samostatné obslužné rutiny pro každý dynamický prvek můžeme použít zobecněnou obslužnou rutinu a určit, který prvek událost způsobil.

Chcete-li použít delegování událostí, musíte nejprve vybrat nadřazenou položku, na které se bude odehrávat poslech událostí. Poté pomocí metody addEventListener přidáme obslužnou rutinu události a označíme typ události a funkci-obslužná rutina.

V rámci funkce obslužné rutiny můžeme pomocí objektu události určit cílovou položku, na které se událost stala. Můžete například použít vlastnost cíl události k získání odkazu na položku, která událost způsobila.

var parentElement = document.getElementById('parentElement');

var targetElement = event.target;

// Používáme targetElement k provedení nezbytných akcí

Nyní, když je dynamicky vytvořená položka přidána do nadřazené položky, bude automaticky povolána obslužná rutina události a my budeme moci provádět požadované akce na základě cílového prvku.

Použití delegování událostí umožňuje zjednodušit kód a vyhnout se nutnosti přidávat obslužné rutiny událostí pro každou dynamickou položku. To je zvláště užitečné, když můžeme mít velké množství prvků nebo když se prvky mohou objevit a dynamicky zmizet.

Poznámka: Při delegování událostí je třeba věnovat pozornost výkonu. Pokud je na stránce mnoho prvků, může být zpracovatelů událostí příliš mnoho, což může mít negativní dopad na výkon stránky. V takových případech se doporučuje omezit oblast delegování na nejbližší statický rodičovský prvek.

Použití jedné obslužné rutiny pro více událostí

Pro použití jedné obslužné rutiny pro více událostí stačí uvést všechny potřebné události jako druhý argument funkce addEventListener. Události jsou uvedeny mezerou nebo čárkou.

Můžete například nastavit obslužnou rutinu pro události "click" a "mouseover" takto:

element.addEventListener('click mouseover', handler);

Funkce handler se tak vyvolá jak kliknutím na položku, tak umístěním kurzoru myši na ni.

Použití jedné obslužné rutiny pro více událostí vám umožní snížit počet kódů a vyhnout se duplikaci. To je zvláště užitečné, když zpracovatelé provádějí jednotypové akce nebo mají společnou logiku.

Při používání tohoto příjmu byste však měli být opatrní. Pokud má obsluha provádět různé operace v závislosti na typu události, pak je nutné zkontrolovat typ události uvnitř obslužné rutiny. To lze provést pomocí vlastnosti event.type nebo použít metodu event.target.matches zkontrolovat, zda se událost shoduje s konkrétním selektorem.

Je také důležité mít na paměti přesměrování události (event propagation) a používat metody event.stopPropagation () a event.preventDefault (), pokud je nutné zastavit další přenos události a zrušit její standardní akci.