JavaScript HTML DOM tapahtumankuuntelijat

addEventListener() -menetelmä

Esimerkki

Lisää tapahtumankuuntelija, joka aktivoituu, kun käyttäjä napsauttaa painiketta:

document.getElementById("myBtn").addEventListener("click", displayDate);

Kokeile itse

addEventListener() Tämä menetelmä määrittää tapahtumankäsittelijän tiettyyn elementtiin.

addEventListener() Tämä menetelmä lisää tapahtumankäsittelijän elementtiin ilman, että se korvaa olemassa olevia tapahtumankäsittelijöitä.

Voit lisätä useita tapahtumankäsittelijöitä yhteen elementtiin.

Voit lisätä useita samanlaisia tapahtumankuuntelijoita yhteen elementtiin, esimerkiksi kaksi "click"-tapahtumaa.

Voit lisätä tapahtumankuuntelijoita mihin tahansa DOM-objektiin, ei pelkästään HTML-elementteihin, esimerkiksi window-objektiin.

addEventListener() metodia, se tekee tapahtumien puhkeamisen hallinnasta helpompaa.

Kun käytät addEventListener() metodia erottamaan JavaScript- ja HTML-koodi paremman luettavuuden saavuttamiseksi; se mahdollistaa tapahtumankuuntelijoiden lisäämisen myös ilman HTML-koodin hallintaa.

Voit käyttää removeEventListener() Metodi poistaa helposti tapahtumankuuntelijat.

Syntaksi

element.addEventListener(event, function, useCapture);

Ensimmäinen parametri on tapahtuman tyyppi (esim. "click" tai "mousedown").

Toinen parametri on funktio, jota kutsutaan, kun tapahtuma tapahtuu.

Kolmas parametri on boolean-arvo, joka määrittää käytetäänkö tapahtumien puhkeamista (bubble) vai tapahtumien sieppaamista (capture). Tämä parametri on valinnainen.

Huomaa:Älä käytä "on"-etuliitettä tapahtumille; käytä "click"-sijasta "onclick".

Lisää tapahtumankuuntelija elementtiin

Esimerkki

Näytä ilmoitus "Hello World!" käyttäjän klikatessa elementtiä:

element.addEventListener("click", function(){ alert("Hello World!"); });

Kokeile itse

Voit myös käyttää ulkoisia "nimettyjä" funktioita:

Esimerkki

Näytä ilmoitus "Hello World!" käyttäjän klikatessa elementtiä:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Kokeile itse

Lisää useita tapahtumankuuntelijoita samalle elementille

addEventListener() Tapahtumankuuntelijoiden lisääminen samalle elementille

Esimerkki

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Kokeile itse

Voit lisätä erilaisia tapahtumia samalle elementille:

Esimerkki

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

Kokeile itse

Lisää tapahtumankuuntelija Window-objektiin

addEventListener() Mahdollistaa tapahtumankuuntelijoiden lisäämisen mihin tahansa HTML DOM-objektiin, kuten HTML-elementtiin, HTML-objektiin, window-objektiin tai mihin tahansa tapahtumia tukevaan objektiin, kuten XMLHttpRequest-objektiin.

Esimerkki

Lisää tapahtumankuuntelija, joka aktivoituu, kun käyttäjä säätää ikkunan kokoa:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Kokeile itse

Välitä parametrit

Kun välitetään parametreja, käytä parametreina "nimetöntä funktiota", joka kutsuu määritettyä funktiota:

Esimerkki

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

Kokeile itse

Tapahtuma puhkeaa vai tapahtuma vastaanotetaan?

HTML DOM:ssa on kaksi tapahtumalevitystapaa: puhkeaminen ja vastaanotto.

Tapahtumalevitys on tapa määritellä elementtien järjestys, kun tapahtuma tapahtuu. Jos <div>-elementissä on <p>-elementti, ja käyttäjä klikkaa <p>-elementtiä, minkä elementin "click"-tapahtuman tulisi käsitellä ensin?

Käytettäessä puhkeamista, ensin käsitellään sisimmät elementit, sitten uloimmat: ensin käsitellään <p>-elementin klikkaustapahtuma, sitten <div>-elementin klikkaustapahtuma.

Käytettäessä vastaanottoa, ensin käsitellään uloimmat elementit, sitten sisämmäiset: ensin käsitellään <div>-elementin klikkaustapahtuma, sitten <p>-elementin klikkaustapahtuma.

addEventListener() menetelmässä voit määrittää levitystyylin käyttämällä "useCapture" parametria:

addEventListener(event, function, useCapture);

Oletusarvo on falseeli tapahtuma käyttää puhkeamista, jos arvo asetetaan trueeli tapahtuma käyttää käsittelyä vastaanottoon.

Esimerkki

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Kokeile itse

removeEventListener() menetelmällä

removeEventListener() Menetelmä poistaa tapahtumankäsittelijät, jotka on lisätty addEventListener() Menetelmä lisätty tapahtumankäsittelijä:

Esimerkki

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka tukee näitä menetelmiä täysin.

Metodi
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Huomautus:IE 8, Opera 6.0 ja aikaisemmat versiot eivät tue addEventListener() ja removeEventListener() Metodi. Kuitenkin, näiden erityisten selaimiversioiden osalta voit käyttää attachEvent() Metodi lisää tapahtumankäsittelijän elementtiin ja sitä kautta detachEvent() Metodi poistaa:

element.attachEvent(event, function);
element.detachEvent(event, function);

Esimerkki

Moniselaiminen ratkaisu:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // suosituimmat selaimet, paitsi IE 8 ja uudet versiot
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 ja aikaisemmat versiot
    x.attachEvent("onclick", myFunction);
}

Kokeile itse

HTML-DOM-tapahtuma-objektin käyttöohje

Jos haluat kaiken HTML-DOM-tapahtumien luettelon, vieritse täysimittaiseen HTML-DOM-tapahtuma-objektin käyttöohje.