JavaScript HTML DOM lytningseventyr

addEventListener() metoden

Eksempel

Tilføj en lytter til hændelse, der udløses, når brugeren klikker på knappen:

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

Prøv det selv

addEventListener() Metoden tildeler en eventhåndterer til et specifikt element.

addEventListener() Metoden tilføjer eventhåndterere til et element uden at overskrive eksisterende eventhåndterere.

Du kan tilføje flere eventhåndterere til et element.

Du kan tilføje flere hændelseshåndterere af samme type til et element, f.eks. to "click"-hændelser.

Du kan tilføje hændelseshåndterere til ethvert DOM-objekt, ikke kun HTML-elementer, såsom window-objektet.

addEventListener() metoden, gør det lettere at kontrollere, hvordan hændelser reagerer på bubbling.

Når du bruger addEventListener() metoden, så JavaScript og HTML-mærkninger er adskilt for bedre læsbarhed; selv når HTML-mærkninger ikke kontrolleres, kan du tilføje hændelseslyttere.

Du kan bruge removeEventListener() Metoden gør det nemt at fjerne hændelseslyttere.

Syntaks

element.addEventListener(event, function, useCapture);

Første parameter er hændelsestypen (f.eks. "click" eller "mousedown").

Anden parameter er den funktion, vi skal kalde, når hændelsen sker.

Tredje parameter er en boolean-værdi, der angiver om der skal bruges event bubbling eller event capturing. Denne parameter er valgfri.

Bemærk:Undgå at bruge "on"-præfiks for hændelser; brug "click" i stedet for "onclick".

Tilføj en hændelseshåndterer til et element

Eksempel

Vis "Hello World!"-meddelelse, når brugeren klikker på et element:

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

Prøv det selv

Du kan også bruge eksterne "navngivne" funktioner:

Eksempel

Vis "Hello World!"-meddelelse, når brugeren klikker på et element:

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

Prøv det selv

Tilføj flere hændelseshåndterere til samme element

addEventListener() Metoden tillader dig at tilføje flere hændelser til samme element, uden at overskrive eksisterende hændelser:

Eksempel

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

Prøv det selv

Du kan tilføje forskellige typer af hændelser til samme element:

Eksempel

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

Prøv det selv

Tilføj en hændelseshåndterer til Window-objektet

addEventListener() Tillader dig at tilføje en hændelseslytter til ethvert HTML DOM-objekt, såsom HTML-elementer, HTML-objekter, window-objekter eller andre objekter, der understøtter hændelser, såsom XMLHttpRequest-objekter.

Eksempel

Tilføj en hændelseslytter, der udløses, når brugeren justerer vinduesstørrelsen:

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

Prøv det selv

Parameteroverførsel

Når du sender parameterverdi, skal du bruge "anonym funktion" som parameter for at kalde den specifikke funktion:

Eksempel

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

Prøv det selv

Begivenhedbobling eller begivenhedsfangst?

Der er to metoder til begivenhedsspredning i HTML DOM: Boble og fangst.

Begivenhedsspredning er en metode til at definere elementernes rækkefølge, når en begivenhed opstår. Hvis der er en <div>-element inde i <div>, og brugeren klikker på <p>-elementet, hvilket element skal "click"-begivenheden behandles først?

I boble, bliver den mest indre elements begivenhed behandlet først, derefter er det de mere ydre: Først behandles <p>-elements klikbegivenhed, derefter er det <div>-elements klikbegivenhed.

I fangst, bliver den yderste elements begivenhed behandlet først, derefter er det de mere indre: Først behandles <div>-elements klikbegivenhed, derefter er det <p>-elements klikbegivenhed.

I addEventListener() metoden kan du angive propagationstypen ved at bruge "useCapture" parameteren:

addEventListener(event, function, useCapture);

Standardværdien er falsevil bruge boblepropagation, hvis denne værdi sættes til truehvis denne værdi sættes til

Eksempel

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

Prøv det selv

removeEventListener() metoden

removeEventListener() Metoden fjerner eventhandler, der allerede er tilføjet via addEventListener() Tilføjelse af eventhandler til metoder:

Eksempel

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

Prøv det selv

Browserunderstøttelse

Tallet i tabellen angiver den første browser, der fuldt ud understøtter disse metoder.

Metode
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Bemærk:IE 8, Opera 6.0 og tidligere versioner understøtter ikke addEventListener() og removeEventListener() Metode. Dog, for disse specielle browserversioner kan du bruge attachEvent()} Metode til at tilføje eventhandler til element, og af detachEvent() Metode til at fjerne:

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

Eksempel

Krydsbrowsers løsning:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Tilpasset mainstream-browsere, med undtagelse af IE 8 og tidligere versioner
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Tilpasset IE 8 og tidligere versioner
    x.attachEvent("onclick", myFunction);
}

Prøv det selv

HTML DOM Event-objekt referencehåndbog

For at få en liste over alle HTML DOM-hændelser, besøg vores fulde HTML DOM Event-objekt referencehåndbog.