HTML DOM addEventListener() metod

Definition och användning

addEventListener() Metoden lägger till en händelselåtskrivare till ett element.

Exempel

Exempel 1

Lägg till click-händelse till <button>-elementet:

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

Prova själv

Exempel 2

Mer kompakta koden:

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

Prova själv

Du kan hitta fler exempel längre ner på sidan.

Syntax

element.addEventListener(type, function, useCapture)

Parametrar

Parametrar Beskrivning
type

Obligatorisk. Namnet på händelsen.

Använd inte prefixet "on".

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


Komplett lista över DOM-händelser
function Obligatorisk. Funktionen som körs när händelsen inträffar.
useCapture

Valfritt (standard = false).

  • false - Hanteraren körs vid bubblingstadiet.
  • true - Hanteraren körs vid insamlingsstadiet.

Returvärde

Inga.

Tekniska detaljer

Denna metod lägger till den specifika händelselyssnarefunktionen till den aktuella nodens lyssnarkollektion för att hantera den specifika händelsetypen type händelser. useCapture är true, registreras lyssnaren som en insamlingshändelselyssnare. Om useCapture är false, registreras den som en vanlig händelselyssnare.

addEventListener() kan anropas flera gånger, och flera händelselyssnare kan registreras 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 händelselyssnare anropas.

Om en händelselyssnarefunktion registreras med samma type och useCapture Parametrar registreras två gånger, kommer den andra registreringen att ignoreras. Om en ny händelselyssnare registreras på samma nod när man hanterar en händelse på den noden, kommer inte den nya händelselyssnaren att anropas för den händelsen.

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

Denna metod finns också Document och Window Objekt definieras och fungerar på samma sätt.

Mer exempel

Exempel 3

Du kan lägga till många händelser till samma element:

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

Prova själv

Exempel 4

Du kan lägga till olika händelser till samma element:

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

Prova själv

Exempel 5

För att överföra argumentvärden, använd "anonym funktion":

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

Prova själv

Exempel 6

Ändra bakgrundsfärgen på <button>-elementet:

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

Prova själv

Exempel 7

Skillnaden mellan bubbling och capturing:

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

Prova själv

Exempel 8

Ta bort händelses behandlare:

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

Prova själv

Webbläsarstöd

element.addEventListener() är en funktion i DOM Level 2 (2001).

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

Lär dig:

HTML DOM EventListener

Komplett lista över DOM-händelser