HTML DOM Document addEventListener() -menetelmä

Määrittely ja käyttö

addEventListener() Metodi liittää tapahtumankäsittelijän dokumenttiin.

Esimerkki

Esimerkki 1

Lisää click-tapahtuma dokumenttiin：

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

Kokeile itse

Yksinkertaisempi syntaksi:

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

Kokeile itse

Esimerkki 2

Voit lisätä useita tapahtuman kuuntelijoita dokumenttiin:

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

Kokeile itse

Esimerkki 3

Voit lisätä erilaisia tapahtumia:

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

Kokeile itse

Esimerkki 4

Kun välität parametreja, kutsu parametrisoitu funktio "nimettömällä funktiolla":

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

Kokeile itse

Esimerkki 5

Muuta dokumentin taustaväriä:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Kokeile itse

Esimerkki 6

Käytä removeEventListener() -metodia:

// Lisää tapahtuman kuuntelija
document.addEventListener("mousemove", myFunction);
// Poista tapahtuman kuuntelija
document.removeEventListener("mousemove", myFunction);

Kokeile itse

Syntaksi

document.addEventListener(type, function, capture)

Parametrit

Parametrit Kuvaus
type

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

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

Käytä "click"-sanaa eikä "onclick"-sanaa.

Kaikki HTML DOM -tapahtumat luetellaan:

HTML DOM Event-objektin viittausoppaasti
function

Välttämätön. Funktio, joka suoritetaan tapahtuman tapahtuessa.

Tapahtuma tapahtuessa tapahtumien objekti siirretään ensimmäisenä parametrina funktiolle.

Tapahtumien objektin tyyppi riippuu määritetystä tapahtumasta. Esimerkiksi, "click"-tapahtuma kuuluu MouseEvent-objektiin.
capture

Valinnainen (oletus = false).

  • true - suoritettava käsittelyvaiheessa
  • false - suoritettava puhkeamisvaiheessa

Palautusarvo

Ei mitään.

Tekninen yksityiskohta

Tämä menetelmä lisää määritetyn tapahtumankuuntelijafunktion nykyisen solmun kuuntelijakokoelmaan käsittelemään määritettyä tapahtumatyyppiä type. Jos capture arvo on true, niin kuuntelija rekisteröidään käsittelytapahtumana. capture arvo on false, se rekisteröidään tavallisena tapahtumankuuntelijana.

addEventListener() saattaa kutsua sitä useita kertoja, rekisteröi useita tapahtumahakkeria samalle solmulle samanlaiselle tapahtumalle. On kuitenkin huomattava, että DOM ei voi määrittää useiden tapahtumahakkerien kutsuajanjärjestystä.

Jos tapahtumankuuntelijafunktio rekisteröidään samalle solmulle samalla type- ja capture parametrit rekisteröidään kahdesti, toinen rekisteröinti jätetään huomiotta. Jos käsitellään tapahtumaa, jossa rekisteröidään uusi tapahtumankuuntelija samalle solmulle, uutta tapahtumankuuntelijaa ei kutsuta.

Kun Node.cloneNode() Menetelmä tai Document.importNode() Menetelmä kopioi Document-kohden, ei kuitenkaan kopioi alkuperäisestä kohdasta rekisteröityjä tapahtumankuuntelijoita.

Tämä menetelmä määritellään myös Document- ja Window-objekteissa, ja sen toiminta on samanlaista.

Selaimen tuki

document.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ä

Dokumenttien menetelmät

addEventListener() -menetelmä

removeEventListener() -menetelmä

Opas

HTML DOM EventListener

Täydellinen DOM-tapahtumalista