HTML DOM Document addEventListener() metod

Definition och användning

addEventListener() Metoden lägger till en händelsehanterare till dokumentet.

Exempel

Exempel 1

Lägg till click-händelse i dokumentet:

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

Prova själv

Enklare syntax:

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

Prova själv

Exempel 2

Du kan lägga till flera händelselyssnare till dokumentet:

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

Prova själv

Exempel 3

Du kan lägga till olika typer av händelser:

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

Prova själv

Exempel 4

När du överför parametrar, använd "anonym funktion" för att anropa funktioner med parametrar:

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

Prova själv

Exempel 5

Ändra dokumentets bakgrundsfärg:

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

Prova själv

Exempel 6

Använd removeEventListener() metod:

// Lägg till händelselyssnare
document.addEventListener("mousemove", myFunction);
// Ta bort händelselyssnare
document.removeEventListener("mousemove", myFunction);

Prova själv

Syntaks

document.addEventListener(type, function, capture)

Parametrar

Parametrar Beskrivning
type

Obligatorisk. Händelsens namn.

Använd inte prefixet "on".

Använd "click" istället för "onclick".

Alla HTML DOM-händelser listas här:

HTML DOM Event-objektets referenshandbok
function

Obligatorisk. Funktionen som körs vid händelseinträffande.

När en händelse inträffar, skickas händelseobjektet som första parameter till funktionen.

Typen på händelseobjektet beror på den specificerade händelsen. Till exempel tillhör "click"-händelsen ett MouseEvent-objekt.
capture

valfritt (standard = false).

  • true - Hanteraren utförs på capture-stadiet
  • false - Hanteraren utförs på bubbling-stadiet

Returvärde

Inga.

Tekniska detaljer

denna metod lägger till den specificerade eventlyssnarefunktionen till den aktuella nodens lyssnarsamling för att hantera den specificerade händelsetypen type. Om capture sätts till true, registreras lyssnaren som en capture-eventlyssnare. Om capture sätts till false, registreras den som en vanlig eventlyssnare.

addEventListener() kan anropas flera gånger, registrera flera eventhanterare för samma typ av händelse på samma nod. Men var uppmärksam på att DOM kan inte fastställa i vilken ordning flera eventhanterare anropas.

om en eventlyssnarefunktion registreras på samma nod med samma type och capture parametrar registreras två gånger, kommer den andra registreringen att ignoreras. Om en ny eventlyssnare registreras på en nod medan en händelse hanteras på den noden, kommer inte den nya eventlyssnaren att anropas för den händelsen.

när Node.cloneNode() metod eller Document.importNode() När en Document-nod klonas, klonas inte de eventlyssnare som är registrerade för den ursprungliga noden.

Denna metod definieras också på Document- och Window-objekten och fungerar på ett liknande sätt.

Webbläsarstöd

document.addEventListener är en DOM Level 2 (2001) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd

Relaterade sidor

Elementmetoder

addEventListener() metod

removeEventListener() metod

Dokumentmetoder

addEventListener() metod

removeEventListener() metod

Tillämpning

HTML DOM EventListener

Komplett lista över DOM-händelser