Kuinka addEventListener () -menetelmä otetaan käyttöön JavaScriptissä?



AddEventListener () on sisäänrakennettu JavaScript-toiminto, joka vie tapahtuman kuuntelemaan ja kutsumaan, kun kuvattu tapahtuma käynnistetään.

Tapahtuma on tärkeä osa Verkkosivu reagoi tapahtuneen tapahtuman mukaan. Jotkut tapahtumat ovat käyttäjien luomia ja jotkut sovellusliittymien luomia. Tässä artikkelissa näemme, miten tapahtumat tapahtuvat ja miten JavaScript-menetelmää, addEventListener, käytetään seuraavassa järjestyksessä:

Mikä on tapahtumakuuntelija?

Tapahtumakuuntelija on JavaScript-toiminto, joka odottaa tapahtuman tapahtumista. Yksinkertainen esimerkki tapahtuma on käyttäjä, joka napsauttaa hiirtä tai painaa näppäintä.



addEventListener () on sisäänrakennettu JavaScript-toiminto joka vie tapahtuman kuuntelemaan, ja toinen argumentti kutsutaan aina, kun kuvattu tapahtuma laukaistaan. Mikä tahansa määrä tapahtumankäsittelijöitä voidaan lisätä yhteen elementtiin korvaamatta olemassa olevia tapahtumankäsittelijöitä.

addEventListener () JavaScriptissä

Jotkut ominaisuudet Tapahtumakuuntelumenetelmään kuuluvat:



  • addEventListener () menetelmä liittää tapahtumakäsittelijä määritettyyn elementtiin.
  • Tämä menetelmä kiinnittää tapahtumankäsittelijän elementtiin, joka ei sisällä korvaa olemassa olevat tapahtumankäsittelijät.
  • Voit lisätä monet tapahtumankäsittelijät yhteen elementtiin.
  • Voit lisätä useita tapahtumankäsittelijöitä samaa tyyppiä yhdelle elementti eli kaksi 'click' -tapahtumaa.
  • Tapahtumakuuntelijat voidaan lisätä mihin tahansa TUOMIO vastustaa HTML-elementtejä. ts. ikkunaobjekti.
  • AddEventListener () -menetelmä tekee siitä helpompaa hallita miten tapahtuma reagoi kuplivaksi.

Kun käytetään addEventListener () -menetelmää, JavaScript erotetaan merkinnän, luettavuuden parantamiseksi ja antaa sinun lisätä tapahtumakuuntelijoita, vaikka et hallitse HTML-merkintää.

Voit myös poistaa tapahtumakuuntelijan helposti käyttämällä removeEventListener () -menetelmä .

Syntaksi:



target.addEventListener (tyyppi, kuuntelija [, vaihtoehdot]) target.addEventListener (tyyppi, kuuntelija [, useCapture]) kohde.addEventListener (tyyppi, kuuntelija [, useCapture, wantUntrusted])

Parametrien arvot

Parametri Kuvaus

tapahtuma

Edellytetään. Merkkijono, joka määrittää tapahtuman nimen.

Huomaa: Älä käytä etuliitettä ”päällä”. Käytä esimerkiksi 'click' eikä 'onclick'.

Katso luettelo kaikista HTML DOM -tapahtumista tutustumalla täydelliseen HTML DOM -tapahtumakohteisiin.

toiminto

Edellytetään. Määrittää toiminnon, joka suoritetaan tapahtuman tapahtuessa.

Kun tapahtuma tapahtuu, tapahtumaobjekti välitetään funktiolle ensimmäisenä parametrina. Tapahtuman tyyppi esine riippuu määritetystä tapahtumasta. Esimerkiksi napsautustapahtuma kuuluu MouseEvent-objektiin.

useCapture

Valinnainen. Boolen arvo, joka määrittää, onko tapahtuma suoritettava sieppaus- vai kuplutusvaiheessa.

suunnittelukuviot php: ssä esimerkiksi

Mahdolliset arvot: true - Tapahtumankäsittelijä suoritetaan sieppausvaiheessa - oletus. Tapahtumankäsittelijä suoritetaan kuplivaiheessa


Nyt kun tiedät miten tapahtumakuuntelija toimii, katsotaanpa esimerkki JavaScriptin addEventListener (): sta.

addEventListener () JavaScriptissä: Esimerkki

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtTämä esimerkki käyttää addEventListener () -menetelmää toiminnon suorittamiseksi, kun käyttäjä napsauttaa painiketta. ('myBtn'). addEventListener ('napsauta', myFunction) -toiminto myFunction () {document.getElementById ('demo'). internalHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

addEventListener JavaScriptissä

Tämän avulla olemme päässeet tämän addEventListenerin loppu JavaScriptiin. Toivon, että ymmärrät miten tapahtuman kuuntelija menetelmä toimii JavaScriptiä.

Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.

Onko sinulla kysymys meille? Mainitse se 'addEventListener in JavaScript' -blogin kommenttiosassa ja palaamme sinuun.