JavaScript HTML DOM händelselyssnare

addEventListener() metoden

Exempel

Lägg till en händelselyssnare som aktiveras när användaren klickar på knappen:

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

Prova själv

addEventListener() Metoden tilldelar en händelsesökare till ett specifikt element.

addEventListener() Metoden lägger till händelsesökare till ett element utan att överskriva befintliga.

Du kan lägga till flera händelsesökare till ett element.

Du kan lägga till flera händelselyssnare av samma typ till ett element, till exempel två "click"-händelser.

Du kan lägga till händelselyssnare till vilket DOM-objekt som helst, inte bara HTML-element, till exempel fönsterobjekt.

addEventListener() metoden gör det lättare att kontrollera hur händelser reagerar på spjällning.

När du använder addEventListener() metoden när JavaScript och HTML-markering är åtskilda, vilket ger bättre läsbarhet; det är möjligt att lägga till händelselyssnare även om HTML-markeringen inte kontrolleras.

Du kan använda removeEventListener() Metoden gör det enkelt att ta bort händelselyssnare.

Syntaks

element.addEventListener(event, function, useCapture);

Den första parametern är händelse_typen (t.ex. "click" eller "mousedown").

Den andra parametern är den funktion som vi behöver anropa när händelsen inträffar.

Den tredje parametern är ett booleskt värde som specificerar om användning av händelsespjällning eller händelsinhämtning. Denna parameter är valfri.

Observera:Använd inte prefixet "on" för händelser; använd "click" istället för "onclick".

Lägg till en händelselyssnare till ett element

Exempel

Visa "Hello World!" när användaren klickar på ett element:

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

Prova själv

Du kan också använda externa "namngivna" funktioner:

Exempel

Visa "Hello World!" när användaren klickar på ett element:

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

Prova själv

Lägg till flera händelselyssnare till samma element

addEventListener() Metoden tillåter dig att lägga till flera händelser till samma element utan att överskriva befintliga händelser:

Exempel

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

Prova själv

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

Exempel

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

Prova själv

Lägg till en händels hanterare till Window-objektet

addEventListener() Tillåter dig att lägga till en händelselyssnare till vilket som helst HTML DOM-objekt, till exempel HTML-element, HTML-objekt, fönsterobjekt eller andra objekt som stöder händelser, som till exempel xmlHttpRequest-objekt.

Exempel

Lägg till en händelselyssnare som triggas när användaren justerar fönstret:

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

Prova själv

Överför parametrar

När du skickar med parametervärden, använd en "anonym funktion" som ett argument för att anropa den specifika funktionen:

Exempel

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

Prova själv

Evenemangsbubbling eller eventkapning?

Det finns två metoder för att sprida evenemang i HTML DOM: bubbling och kapning.

Evenemangsuppgifter är en metod för att definiera elementets ordning när ett evenemang inträffar. Om <div>-elementet innehåller ett <p>-element och användaren klickar på <p>-elementet, vilket element bör hantera "click"-händelsen först?

I bubbling, hanteras händelserna för de inre elementen först, sedan de yttre: Först behandlas <p>-elementets klickhändelse, sedan <div>-elementets klickhändelse.

I kapning, hanteras händelserna för de yttersta elementen först, sedan de inre: Först behandlas <div>-elementets klickhändelse, sedan <p>-elementets klickhändelse.

I addEventListener() metoden kan du använda "useCapture"-parametern för att specificera propagationstypen:

addEventListener(event, function, useCapture);

Standardvärdet är falsekommer det att använda bubblingpropagation, om detta värde sätts till trueom värdet sätts till

Exempel

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

Prova själv

removeEventListener() metoden

removeEventListener() Metoden tar bort eventhanterare som har lagts till via addEventListener() Evenemangshanterare som läggs till metoden:

Exempel

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

Prova själv

Webbläsarstöd

Numer i tabellen anger den första webbläsare som helt stöder dessa metoder.

Metod
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Anmärkning:IE 8, Opera 6.0 och tidigare versioner stöder inte addEventListener() och removeEventListener() Metod. Men, för dessa speciella versioner av webbläsare kan du använda attachEvent()} Metod för att lägga till eventhanterare till elementet och detachEvent() Metod borttagning:

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

Exempel

Korsbläddringslösning:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // För huvudsakliga webbläsare, utom IE 8 och äldre versioner
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // För IE 8 och tidigare versioner
    x.attachEvent("onclick", myFunction);
}

Prova själv

HTML DOM Event-objekt-referenshandbok

För en fullständig lista över alla HTML DOM-händelser, besök vår HTML DOM Event-objekt-referenshandbok.