JavaScript HTML DOM EventListener
Die addEventListener() metode
Voorbeeld
Voeg 'n gebeurtenisluisteraar by wat brand wanneer 'n gebruiker 'n knoppie klik:
document.getElementById("myBtn").addEventListener("click", displayDate);
Die addEventListener()
metode heg 'n gebeurtenishanteerder aan die gespesifiseerde element.
Die addEventListener()
metode heg 'n gebeurtenishanteerder aan 'n element sonder om bestaande gebeurtenishanteerders te oorskryf.
Jy kan baie gebeurtenishanteerders by een element voeg.
Jy kan baie gebeurtenishanteerders van dieselfde tipe by een element voeg, dws twee "klik" gebeurtenisse.
U kan gebeurtenisluisteraars by enige DOM-voorwerp voeg, nie net HTML-elemente nie. dws die venstervoorwerp.
Die addEventListener()
metode maak dit makliker om te beheer hoe die gebeurtenis op borrel reageer.
Wanneer die addEventListener()
metode gebruik word, word die JavaScript van die HTML-opmerk geskei, vir beter leesbaarheid en laat jou toe om gebeurtenisluisteraars by te voeg, selfs wanneer jy nie die HTML-opmerk beheer nie.
U kan 'n gebeurtenisluisteraar maklik verwyder deur die removeEventListener()
metode te gebruik.
Sintaksis
element.addEventListener(event, function, useCapture);
Die eerste parameter is die tipe gebeurtenis (soos " click
" of " mousedown
" of enige ander HTML DOM-gebeurtenis .)
Die tweede parameter is die funksie wat ons wil oproep wanneer die gebeurtenis plaasvind.
Die derde parameter is 'n Boolese waarde wat spesifiseer of gebeurtenisborrel of gebeurtenisvaslegging gebruik moet word. Hierdie parameter is opsioneel.
Let daarop dat jy nie die "aan"-voorvoegsel vir die geleentheid gebruik nie; gebruik " click
" in plaas van " onclick
".
Voeg 'n gebeurtenishanteerder by 'n element
Voorbeeld
Waarskuwing "Hallo Wêreld!" wanneer die gebruiker op 'n element klik:
element.addEventListener("click", function(){ alert("Hello World!"); });
Jy kan ook verwys na 'n eksterne "benoemde" funksie:
Voorbeeld
Waarskuwing "Hallo Wêreld!" wanneer die gebruiker op 'n element klik:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Voeg baie gebeurtenishanteerders by dieselfde element
Die addEventListener()
metode laat jou toe om baie gebeurtenisse by dieselfde element te voeg, sonder om bestaande gebeurtenisse te oorskryf:
Voorbeeld
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Jy kan gebeurtenisse van verskillende tipes by dieselfde element voeg:
Voorbeeld
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Voeg 'n gebeurtenishanteerder by die venstervoorwerp
Die addEventListener()
metode laat jou toe om gebeurtenisluisteraars by enige HTML DOM-objek by te voeg, soos HTML-elemente, die HTML-dokument, die vensterobjek of ander voorwerpe wat gebeurtenisse ondersteun, soos die xmlHttpRequest
objek.
Voorbeeld
Voeg 'n gebeurtenisluisteraar by wat begin wanneer 'n gebruiker die venster se grootte verander:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Slaag parameters
Wanneer u parameterwaardes deurgee, gebruik 'n "anonieme funksie" wat die gespesifiseerde funksie oproep met die parameters:
Voorbeeld
element.addEventListener("click", function(){ myFunction(p1, p2); });
Gebeurtenis borrel of gebeurtenis vaslegging?
Daar is twee maniere van gebeurtenisvoortplanting in die HTML DOM, borrel en vaslegging.
Gebeurtenisvoortplanting is 'n manier om die elementorde te definieer wanneer 'n gebeurtenis plaasvind. As jy 'n <p> element binne 'n <div> element het, en die gebruiker klik op die <p> element, watter element se "klik" gebeurtenis moet eerste hanteer word?
In borrel word die mees binneste element se gebeurtenis eerste hanteer en dan die buitenste: die <p> element se klik gebeurtenis word eerste hanteer, dan die <div> element se klik gebeurtenis.
By die vaslegging van die buitenste element se gebeurtenis word eerste hanteer en dan die binneste: die <div> element se klik gebeurtenis sal eerste hanteer word, dan die <p> element se klik gebeurtenis.
Met die addEventListener() metode kan jy die voortplantingstipe spesifiseer deur die "useCapture" parameter te gebruik:
addEventListener(event, function, useCapture);
Die verstekwaarde is vals, wat die borrelende voortplanting sal gebruik, wanneer die waarde op waar gestel is, gebruik die gebeurtenis die vasvangvoortplanting.
Voorbeeld
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Die removeEventListener() metode
Die removeEventListener()
metode verwyder gebeurtenishanteerders wat met die addEventListener() metode aangeheg is:
Voorbeeld
element.removeEventListener("mousemove", myFunction);
HTML DOM Event Object Verwysing
Vir 'n lys van alle HTML DOM-gebeurtenisse, kyk na ons volledige HTML DOM Event Object Reference .