Jak implementovat metodu addEventListener () v JavaScriptu?

AddEventListener () je vestavěná funkce JavaScriptu, která převezme událost, aby ji naslouchala a byla volána, když je popsaná událost spuštěna.

Událost je důležitou součástí Webová stránka reaguje podle události, ke které došlo. Některé události jsou generovány uživateli a některé jsou generovány rozhraními API. V tomto článku uvidíme, jak k událostem dochází a jak se metoda addEventListener v JavaScriptu používá v následujícím pořadí:

Co je posluchač událostí?

Posluchač událostí je procedura v JavaScriptu, která čeká na výskyt události. Jednoduchý příklad událost je uživatel, který klikne myší nebo stiskne klávesu na klávesnici.





The addEventListener () je vestavěný Funkce JavaScript který vezme událost k poslechu a druhý argument, který se má zavolat, kdykoli se spustí popsaná událost. K jednomu prvku lze přidat libovolný počet obslužných rutin událostí bez přepsání existujících obslužných rutin událostí.

addEventListener () v JavaScriptu

Některé z funkce metody posluchače událostí zahrnují:



  • The addEventListener () metoda připojuje obsluha události na zadaný prvek.
  • Tato metoda připojí obslužnou rutinu události k prvku bez přepis existující obslužné rutiny událostí.
  • Můžeš přidat mnoho obslužných rutin událostí k jednomu prvku.
  • Můžete přidat mnoho obslužných rutin událostí stejného typu do jednoho živel , tj. dvě události „kliknutí“.
  • Posluchače událostí lze přidat do libovolného ROZSUDEK objekt nejen prvky HTML. tj. objekt okna.
  • Metoda addEventListener () to dělá jednodušší řídit, jak událost reaguje bublat.

Při použití metody addEventListener () je JavaScript oddělen od označení pro lepší čitelnost a umožňuje vám přidat posluchače událostí, i když nemáte pod kontrolou označení HTML.

Posluchače událostí můžete také snadno odebrat pomocí metoda removeEventListener () .

Syntax:



print_r v php
target.addEventListener (typ, posluchač [, možnosti]) target.addEventListener (typ, posluchač [, useCapture]) target.addEventListener (typ, posluchač [, useCapture, wantsUntrusted])

Hodnoty parametrů

Parametr Popis

událost

Požadované. Řetězec, který určuje název události.

Poznámka: Nepoužívejte předponu „zapnuto“. Například místo „onclick“ použijte „kliknutí“.

Seznam všech událostí HTML DOM naleznete v našem úplném odkazu na objekt události HTML DOM.

funkce

Požadované. Určuje funkci, která se má spustit, když dojde k události.

převést datum řetězce na datum

Když dojde k události, objekt události se předá funkci jako první parametr. Typ události objekt záleží na zadané události. Například událost „kliknutí“ patří k objektu MouseEvent.

useCapture

Volitelný. Logická hodnota, která určuje, zda má být událost provedena ve fázi zachycení nebo ve fázi probublávání.

Možné hodnoty: true - obslužná rutina události se provádí v zachycovací fázifalse - výchozí. Obslužná rutina události se provádí ve fázi probublávání


Nyní, když víte, jak posluchač událostí funguje, pojďme se podívat na příklad addEventListener () v JavaScriptu.

addEventListener () v JavaScriptu: Příklad

 
& lt! DOCTYPE html> ('myBtn'). addEventListener ('click', myFunction) funkce myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

addEventListener v JavaScriptu

S tímto se dostáváme na konec tohoto addEventListener v JavaScriptu. Doufám, že jste pochopili, jak posluchač událostí metoda pracuje v JavaScriptu.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů blogu „addEventListener in JavaScript“ a my se vám ozveme.