Kuidas rakendada JavaScripti meetodit addEventListener ()?



AddEventListener () on sisseehitatud JavaScripti funktsioon, mis võtab sündmuse kuulamiseks ja kutsumiseks, kui kirjeldatud sündmus käivitatakse.

Sündmus on oluline osa Veebileht vastab vastavalt toimunud sündmusele. Mõned sündmused on kasutajate loodud ja mõned on loodud API-de poolt. Selles artiklis näeme, kuidas sündmused toimuvad ja kuidas JavaScripti meetodit addEventListener kasutatakse järgmises järjestuses:

Mis on sündmuste kuulaja?

Sündmuste kuulaja on JavaScripti protseduur, mis ootab sündmuse toimumist. Lihtne näide sündmus on kasutaja, kes klõpsab hiirt või vajutab klaviatuuril klahvi.





The addEventListener () on sisseehitatud JavaScripti funktsioon mis võtab sündmuse kuulamiseks ja teise argumendi, mis tuleb kutsuda alati, kui kirjeldatud sündmus vallandatakse. Ühele elemendile saab lisada suvalise arvu sündmuste käitlejaid ilma olemasolevaid sündmuste käitlejaid üle kirjutamata.

addEventListener () JavaScriptis

Mõned Funktsioonid sündmuse kuulaja meetodi hulka kuuluvad:



  • The addEventListener () meetod lisab ürituste läbiviija määratud elemendile.
  • See meetod kinnitab sündmuste käitleja elemendile ilma ülekirjutamine olemasolevad ürituste korraldajad.
  • Saate lisada palju ürituste korraldajaid ühe elemendi juurde.
  • Võite lisada palju sündmuse käitlejaid sama tüüpi ühele element , st kaks 'klõpsu' sündmust.
  • Ürituse kuulajaid saab lisada ükskõik millisesse KOHTUOTSUS objekt mitte ainult HTML-elemendid. st aknaobjekt.
  • Selle teeb meetod addEventListener () lihtsam kontrollida, kuidas sündmus reageerib mullitama.

Meetodi addEventListener () kasutamisel eraldatakse JavaScripti funktsioonist märgistus, parema loetavuse huvides ja võimaldab teil lisada sündmuste kuulajaid ka siis, kui te ei kontrolli HTML-i märgistust.

Samuti saate sündmuse kuulaja hõlpsasti eemaldada, kasutades eemaldaEventListener () meetod .

Süntaks:



target.addEventListener (tüüp, kuulaja [, valikud]) target.addEventListener (tüüp, kuulaja [, useCapture]) target.addEventListener (tüüp, kuulaja [, useCapture, wantsUntrusted])

Parameetri väärtused

Parameeter Kirjeldus

sündmus

Nõutud. String, mis määrab sündmuse nime.

Märkus. Ärge kasutage eesliidet “sees”. Näiteks kasutage „onclicki” asemel „click”.

Kõigi HTML DOM-i sündmuste loendi leiate meie täielikust HTML DOM-i sündmuse objekti viitest.

funktsioon

Nõutud. Määrab funktsiooni, mida käivitada sündmuse ilmnemisel.

Sündmuse toimumisel edastatakse funktsioonile esimese parameetrina sündmuse objekt. Sündmuse tüüp objekt sõltub määratud sündmusest. Näiteks kuulub „click” sündmus objekti MouseEvent.

useCapture

Valikuline. Boole'i ​​väärtus, mis määrab, kas sündmus tuleks käivitada jäädvustamise või mullitamise etapis.

Võimalikud väärtused: true - sündmuste käitleja käivitatakse püüdmise phasefalse- Default. Sündmuste käitleja hukatakse mullitamise etapis


Nüüd, kui teate, kuidas sündmuste kuulaja töötab, vaatame JavaScripti addEventListener () näidet.

staatilise ploki näide javas

addEventListener () JavaScriptis: näide

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Selles näites kasutatakse funktsiooni AddEventListener () funktsiooni käivitamiseks, kui kasutaja klõpsab nuppu. & lt / p & gt & ltbutton id = 'myBtn' & gtTry it & lt ('myBtn'). addEventListener ('click', myFunction) funktsioon myFunction () {document.getElementById ('demo'). internalHTML = 'Tere maailm'} & lt / skript & gt & lt / body & gt & lt / html & gt

addEventListener JavaScriptis

Sellega jõuame selle JavaScripti addEventListeneri lõppu. Loodan, et saite aru, kuidas ürituse kuulaja meetod töötab JavaScripti.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagatipuliste ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda ajaveebi “addEventListener JavaScriptis” kommentaaride jaotises ja võtame teiega ühendust.