HTML DOM addEventListener() metode

Definition og brug

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

Eksempel

Eksempel 1

Tilføj click-begivenhed til <button>-elementet:

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

Prøv det selv

Eksempel 2

Mere kompakt kode:

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

Prøv det selv

Du kan finde flere eksempler nedenfor på siden.

Syntaks

element.addEventListener(type, function, useCapture)

Parametre

Parametre Beskrivelse
type

Obligatorisk. Begivenhedens navn.

Brug ikke præfikset "on".

Brug "click" i stedet for "onclick".


Komplet liste over DOM-begivenheder
function Obligatorisk. Funktionen, der køres, når begivenheden sker.
useCapture

Valgfri (standard = false).

  • false - Behandleren udføres i boblefase.
  • true - Behandleren udføres i fangstfase.

Returværdi

Intet.

Teknisk detalje

denne metode tilføjer den angivne eventlytterfunktion til den nuværende lytterkollektion på den nuværende node til at håndtere den angivne begivenhedstype type begivenhederne. useCapture til true, registreres lytteren som en fangsteventlytter. Hvis useCapture til false, registreres den som en almindelig eventlytter.

addEventListener() kan blive kaldt flere gange, og flere eventhåndterere kan registreres til samme type begivenhed på samme node. Men DOM kan ikke bestemme rækkefølgen af, hvornår flere eventhåndterere kaldes.

Hvis en eventlytterfunktion bruges på samme node med samme type og useCapture parametrene registreres to gange, så ignoreres den anden registrering. Hvis der behandles en node på et node, hvor der registreres en ny eventlytter, 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å Document og Window Objekter er defineret og fungerer på samme måde.

Flere eksempler

Eksempel 3

Du kan tilføje mange begivenheder til samme element:

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

Prøv det selv

Eksempel 4

Du kan tilføje forskellige begivenheder til samme element:

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

Prøv det selv

Eksempel 5

For at overføre parameter værdier, brug "anonym funktion":

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

Prøv det selv

Eksempel 6

Ændr <button>-elements baggrundsfarve:

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

Prøv det selv

Eksempel 7

Fjernelse og capture forskel:

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

Prøv det selv

Eksempel 8

Fjern eventhandler:

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

Prøv det selv

Browserv understøttelse

element.addEventListener() er en DOM Level 2 (2001) funktion.

Alle browsere understøtter det fuldt ud:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Støtte 9-11 Støtte Støtte Støtte Støtte

Relaterede sider

Elementmetoder:

addEventListener() metode

removeEventListener() metode

Dokumentmetoder:

addEventListener() metode

removeEventListener() metode

Undervisning:

HTML DOM EventListener

Komplet liste over DOM-begivenheder