HTML DOM addEventListener() -menetelmä

Määrittely ja käyttö

addEventListener() Metodi liittää tapahtuman käsittelijän elementtiin.

Esimerkki

Esimerkki 1

Lisää click-tapahtuma <button>-elementille:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Kokeile itse

Esimerkki 2

Tyylikäs koodi:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Kokeile itse

Lisää esimerkkejä sivun alareunasta.

Syntaksi

element.addEventListener(type, function, useCapture)

Parametrit

Parametrit Kuvaus
type

Välttämätön. Tapahtuman nimi.

Älä käytä "on"-etuliitettä.

Käytä "click" sen sijaan "onclick".


Täydellinen DOM-tapahtumalista
function Välttämätön. Suoritettava funktio tapahtumahetkellä.
useCapture

Valinnainen (oletusarvo = false).

  • false - Suoritettava käsittelijä nousemisvaiheessa.
  • true - Suoritettava käsittelijä vangitsemisvaiheessa.

Palautusarvo

Ei mitään.

Tekninen yksityiskohta

Tämä menetelmä lisää määritetyn tapahtumankuuntelija-funktion nykyisen solmun kuuntelijakokoelmaan käsittelemään määritettyä tapahtumatyypin type tapahtuma. useCapture true, niin kuuntelija rekisteröityy saappaustapahtumankuuntelijaksi. Jos useCapture false, se rekisteröityy yleiseksi tapahtumankuuntelijaksi.

addEventListener() voidaan kutsua useita kertoja, rekisteröidä useita tapahtumankäsittelijöitä samalle solmulle samanlaiselle tapahtumalle. On kuitenkin huomattava, että DOM ei voi varmistaa useiden tapahtumankäsittelijöiden kutsuajärjestystä.

Jos tapahtumankuuntelija-funktio rekisteröityy samalla tavalla samalle solmulle type ja useCapture Parametrina rekisteröity kaksi kertaa, toinen rekisteröinti sivuutetaan. Jos käsittelet solmua, johon on rekisteröity uusi tapahtumankuuntelija, ei kutsuta uutta tapahtumankuuntelijaa kyseiselle tapahtumalle.

Kun Node.cloneNode() Menetelmä tai Document.importNode() Kun kopioit Document-elementin, ei kopioida alkuperäistä elementtiä rekisteröimiä tapahtumankuuntelijoita.

Tämä menetelmä toimii myös Document ja Window Objekti määrittää ja toimii samalla tavalla.

Lisää esimerkkejä

Esimerkki 3

Voit lisätä monia tapahtumia samalle elementille:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Kokeile itse

Esimerkki 4

Voit lisätä eri tapahtumia samalle elementille:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Kokeile itse

Esimerkki 5

Jos haluat välittää parametria, käytä "匿名函数":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Kokeile itse

Esimerkki 6

Muuta <button>-elementin taustaväriä:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Kokeile itse

Esimerkki 7

Päällystämisen ja kaappauksen ero:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Kokeile itse

Esimerkki 8

Poista tapahtumankäsittelijä:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Kokeile itse

Selaimen tuki

element.addEventListener() Se on DOM Level 2 (2001) -ominaisuus.

Kaikki selaimet tukevat sitä täysin:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki 9-11 Tuki Tuki Tuki Tuki

Liittyvät sivut

Elementtien menetelmät:

addEventListener() -menetelmä

removeEventListener() -menetelmä

Dokumenttimenetelmät:

addEventListener() -menetelmä

removeEventListener() -menetelmä

Ohje:

HTML DOM EventListener

Täydellinen DOM-tapahtumalista