Kaip įdiegti „addEventListener ()“ metodą „JavaScript“?



„AddEventListener ()“ yra integruota „JavaScript“ funkcija, reikalaujanti įvykio išklausyti ir iškviesti, kai aprašytas įvykis bus suaktyvintas.

Įvykis yra svarbi . Tinklalapis reaguoja pagal įvykį. Kai kuriuos įvykius sukuria vartotojai, o kai kuriuos - API. Šiame straipsnyje pamatysime, kaip vyksta įvykiai ir kaip „JavaScript“ metodas „addEventListener“ naudojamas tokia seka:

Kas yra įvykių klausytojas?

Įvykių klausytojas yra „JavaScript“ procedūra, laukianti įvykio. Paprastas pavyzdys įvykis yra vartotojas, spustelėjęs pelę arba paspaudęs klaviatūros klavišą.





addEventListener () yra pastatytas „JavaScript“ funkcija kurio reikia įvykiui išklausyti, ir antras argumentas, kurį reikia iškviesti, kai aprašytas įvykis bus paleistas. Bet kurį įvykių tvarkytuvų skaičių galima pridėti prie vieno elemento, neperrašant esamų įvykių tvarkytuvų.

kaip rasti duomenų tipą python

addEventListener () „JavaScript“

Kai kurie iš funkcijos Į renginio klausytojo metodo taikymo sritį įeina:



  • addEventListener () metodas pridedamas renginių vedėjas prie nurodyto elemento.
  • Šiuo metodu įvykių tvarkytuvas pridedamas prie elemento be perrašymas esamų renginių tvarkytojų.
  • Galite pridėti daug renginių tvarkytojų prie vieno elemento.
  • Galite pridėti daug „ to paties tipo prie vieno elementas , ty du „paspaudimo“ įvykiai.
  • Renginio klausytojai gali būti pridėti prie bet kurio SPRENDIMAS objektas ne tik HTML elementai. t. y. lango objektas.
  • Tai sukuria metodas addEventListener () lengviau kontroliuoti, kaip įvykis reaguoja į burbuliavimą.

Naudojant addEventListener () metodą, „JavaScript“ yra atskirta nuo žymėjimas, kad būtų lengviau skaityti, ir leidžia pridėti įvykių klausytojų, net kai nekontroliuojate HTML žymėjimo.

Taip pat galite lengvai pašalinti įvykių klausytoją naudodami „removeEventListener (“) metodas .

Sintaksė:



target.addEventListener (tipas, klausytojas [, parinktys]) target.addEventListener (tipas, klausytojas [, useCapture]) target.addEventListener (tipas, klausytojas [, useCapture, wantsUntrusted])

Parametrų vertės

Parametras apibūdinimas

įvykis

Būtina. Eilutė, nurodanti įvykio pavadinimą.

Pastaba: nenaudokite priešdėlio „on“. Pavyzdžiui, vietoj „onclick“ naudokite „spustelėkite“.

Norėdami pamatyti visų HTML DOM įvykių sąrašą, žiūrėkite visą mūsų HTML DOM įvykio objekto nuorodą.

funkcija

Būtina. Nurodo funkciją, kurią reikia vykdyti įvykiui įvykus.

Kai įvykis įvykis, įvykio objektas perduodamas funkcijai kaip pirmas parametras. Įvykio tipas objektas priklauso nuo nurodyto įvykio. Pavyzdžiui, įvykis „spustelėkite“ priklauso „MouseEvent“ objektui.

useCapture

Neprivaloma. Bulio reikšmė, nurodanti, ar įvykis turėtų būti vykdomas fiksavimo, ar burbuliavimo fazėje.

Galimos reikšmės: true - įvykių tvarkytuvas vykdomas užfiksuojant phasefalse- Default. Įvykių tvarkytojas vykdomas burbuliavimo fazėje


Dabar, kai žinote, kaip veikia įvykių klausytojas, pažvelkime į „JavaScript“ „addEventListener“ () pavyzdį.

virėjas vs lėlė vs jenkins

addEventListener () „JavaScript“: pavyzdys

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Šis pavyzdys naudoja metodą addEventListener (), kad įvykdytų funkciją, kai vartotojas spusteli mygtuką. & lt / p & gt & ltbutton id = 'myBtn' & gtTry it & lt & button & gt ('myBtn'). addEventListener ('click', myFunction) funkcija myFunction () {document.getElementById ('demo'). internalHTML = 'Hello World'} & lt / scenarijus & gt & lt / body & gt & lt / html & gt

addEventListener „JavaScript“

Tai pasiekėme „addEventListener“ sistemoje „JavaScript“. Tikiuosi, kad supratote, kaip renginių klausytojas metodas veikia „JavaScript“.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti tinklaraščio „addEventListener in JavaScript“ komentarų skyriuje ir mes su jumis susisieksime.