HTML DOM Document addEventListener() metode

Definition og brug

addEventListener() Metoden tilføjer en hændelseshåndterer til dokumentet.

Eksempel

Eksempel 1

Tilføj click-tilfældet til dokumentet:

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

Prøv det selv

Enklere syntaks:

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

Prøv det selv

Eksempel 2

Du kan legge til flere eventlyttere til dokumentet:

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

Prøv det selv

Eksempel 3

Du kan legge til forskjellige typer hendelser:

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

Prøv det selv

Eksempel 4

Når du overfører parametere, bruk en "anonym funksjon" for å kalle en funksjon med parametere:

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

Prøv det selv

Eksempel 5

Endre dokumentets bakgrunnsfarge:

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

Prøv det selv

Eksempel 6

Bruk removeEventListener() metoden:

// Legg til eventlytter
document.addEventListener("mousemove", myFunction);
// Fjern eventlytter
document.removeEventListener("mousemove", myFunction);

Prøv det selv

Syntax

document.addEventListener(type, function, capture)

Parameter

Parameter Beskrivelse
type

Obligatorisk. Hendelsens navn.

Unngå å bruke "on"-prefikset.

Bruk "click" i stedet for "onclick".

Alle HTML DOM hendelser er listet under:

HTML DOM Event Object Reference Manual
function

Obligatorisk. Funksjon som kjører ved hendelse.

Når en begivenhed sker, overføres eventobjektet som første parameter til funktionen.

Eventobjektets type afhænger af det specificerede event. For eksempel tilhører "click"-begivenheden til MouseEvent-objektet.
capture

Valgfri (standard = false).

  • true - Håndtereren udføres i fangsttrin
  • false - Håndtereren udføres i bobletrin

Returværdi

Ingen.

Tekniske detaljer

denne metode tilføjer den specificerede eventlytterfunktion til den nuværende nodes lytterkollektion til at håndtere den specificerede type begivenhed. Hvis capture er true, registreres lytteren som en fangsteventlytter. Hvis capture er false, registreres den som en almindelig eventlytter.

addEventListener() kan blive kaldt flere gange, og flere eventhåndterere kan registreres for samme type begivenhed på samme node. Men vær opmærksom på, at DOM kan ikke fastslå rækkefølgen af, hvordan flere eventhåndterere kaldes.

Hvis en eventlytterfunktion bruges på samme node med samme type og capture parametrene registreres to gange, ignoreres den anden registrering. Hvis en ny eventlytter registreres på en node, mens man håndterer en begivenhed på den node, vil den nye eventlytter ikke blive kaldt for den begivenhed.

Når Node.cloneNode() Metode eller Document.importNode() Når en Document-node kopieres, kopieres ikke de eventlyttere, der er registreret til den oprindelige node.

Denne metode er også defineret på Document- og Window-objekter, og fungerer på samme måde.

Browserstøtte

document.addEventListener er en DOM Level 2 (2001) egenskab.

Alle browsere understøtter det fuldt ud:

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

Relaterede sider

Elementmetoder

addEventListener() metode

removeEventListener() metode

Dokumentmetoder

addEventListener() metode

removeEventListener() metode

Tilvejebringer

HTML DOM EventListener

Komplet DOM begivenhedsliste