AddEventListener () -menetelmä - JavaScript-tapahtumaluettelon esimerkkikoodi

JavaScript addEventListener () -menetelmän avulla voit määrittää toiminnot, joita kutsutaan tietyn tapahtuman tapahtuessa, esimerkiksi kun käyttäjä napsauttaa painiketta. Tämä opetusohjelma näyttää, kuinka voit lisätä addEventListener () -koodisi.

Tapahtumien ja tapahtumankäsittelijöiden ymmärtäminen

Tapahtumat ovat toimintoja, jotka tapahtuvat, kun käyttäjä tai selain käsittelee sivua. Niillä on tärkeä rooli, koska ne voivat saada verkkosivun elementit muuttumaan dynaamisesti.

Esimerkiksi, kun selain lopettaa asiakirjan lataamisen, loadtapahtui tapahtuma. Jos käyttäjä napsauttaa painiketta sivulla, clicktapahtuma on tapahtunut.

Monet tapahtumat voivat tapahtua kerran, useita kertoja tai ei koskaan. Et myöskään voi tietää, milloin tapahtuma tapahtuu, varsinkin jos se on käyttäjän luomaa.

Näissä tilanteissa tarvitset tapahtumankäsittelijän havaitsemaan tapahtuman. Näin voit asettaa koodin reagoimaan tapahtumiin, kun ne tapahtuvat lennossa.

JavaScript tarjoaa tapahtumankäsittelijän addEventListener()menetelmän muodossa . Tämä käsittelijä voidaan liittää tiettyyn HTML-elementtiin, jonka tapahtumia haluat seurata, ja elementtiin voi olla liitetty useita käsittelijöitä.

addEventListener () -syntaksi

Tässä on syntaksi:

target.addEventListener(event, function, useCapture) 
  • kohde : HTML-elementti, johon haluat lisätä tapahtumakäsittelijän. Tämä elementti on osa asiakirjaobjektimallia (DOM), ja haluat ehkä oppia DOM-elementin valitsemisesta.
  • tapahtuma : merkkijono, joka määrittää tapahtuman nimen. Olemme jo maininneet loadja clicktapahtumat. Kiinnostuneille tässä on täydellinen luettelo HTML DOM -tapahtumista.
  • toiminto : määrittää toiminnon, joka suoritetaan, kun tapahtuma havaitaan. Tämä on taika, jonka avulla verkkosivusi voivat muuttua dynaamisesti.
  • useCapture : valinnainen looginen arvo (true tai false), joka määrittää, onko tapahtuma suoritettava sieppaus- vai kuplutusvaiheessa. Jos sisäkkäisiä HTML-elementtejä (kuten imgsisällä a div) on liitetty tapahtumankäsittelijöihin, tämä arvo määrittää, mikä tapahtuma suoritetaan ensin. Oletuksena se on asetettu epätosi, mikä tarkoittaa, että sisin HTML-tapahtumankäsittelijä suoritetaan ensin (kuplivaihe).

addEventListener () -koodiesimerkki

Tämä on yksinkertainen tekemäni esimerkki, joka näyttää sinut addEventListener()toiminnassa.

Kun käyttäjä napsauttaa painiketta, näyttöön tulee viesti. Toinen painikkeen napsautus piilottaa viestin. Tässä on asiaankuuluva JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Aiemmin näytetyn syntaksin mukaan addEventListener():

  • kohde : HTML-elementtiid='button'
  • function : anonyymi (nuoli) -toiminto, joka asettaa koodin, joka tarvitaan viestin paljastamiseen / piilottamiseen
  • useCapture : vasemmalle oletusarvoonfalse

Toimintoni pystyy paljastamaan / piilottamaan viestin lisäämällä / poistamalla CSS-luokan nimeltä "paljastaa", mikä muuttaa viestielementin näkyvyyttä.

Tietysti koodissasi voit mukauttaa tätä toimintoa. Voit myös korvata nimettömän toiminnon omalla nimellään.

Hyväksytty tapahtuma parametrina

Joskus saatamme haluta tietää lisätietoja tapahtumasta, kuten mitä elementtiä napsautettiin. Tässä tilanteessa meidän on välitettävä tapahtumaparametri toiminnallemme.

Tämä esimerkki osoittaa, kuinka voit hankkia elementin id:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Tässä tapahtumaparametri on muuttuja nimeltä, emutta sitä voidaan helposti kutsua muuksi, kuten "tapahtuma". Tämä parametri on objekti, joka sisältää erilaisia ​​tietoja tapahtumasta, kuten kohdetunnuksen.

Sinun ei tarvitse tehdä mitään erityistä, ja JavaScript tietää automaattisesti, mitä tehdä, kun välität parametrin tällä tavalla funktiollesi.

Tapahtumankäsittelijöiden poistaminen

Jos jostain syystä et enää halua tapahtumankäsittelijän aktivoituvan, poista se seuraavasti:

target.removeEventListener(event, function, useCapture); 

Parametrit ovat samat kuin addEventListener().

Harjoitus tekee mestarin

Paras tapa parantua tapahtumankäsittelijöiden kanssa on harjoitella omalla koodillasi.

Tässä on esimerkin tekemäni projekti, jossa käytin tapahtumankäsittelijöitä muuttamaan verkkosivun taustalla virtaavien kuplien väriä, kokoa ja nopeutta (sinun on napsautettava keskipaneelia paljastamaan säätimet).

Pidä hauskaa ja mene tekemään jotain mahtavaa!

Lisää aloittelijaystävällistä web-kehitystietoa on käymällä blogissani osoitteessa 1000 Mile World ja seuraamalla minua Twitterissä.