JavaScript HTML DOM-gebeurtenisse
HTML DOM laat JavaScript toe om op HTML-gebeurtenisse te reageer:
Reageer op gebeure
'n JavaScript kan uitgevoer word wanneer 'n gebeurtenis plaasvind, soos wanneer 'n gebruiker op 'n HTML-element klik.
Om kode uit te voer wanneer 'n gebruiker op 'n element klik, voeg JavaScript-kode by 'n HTML-gebeurteniskenmerk:
onclick=JavaScript
Voorbeelde van HTML-gebeurtenisse:
- Wanneer 'n gebruiker die muis klik
- Wanneer 'n webblad gelaai is
- Wanneer 'n prent gelaai is
- Wanneer die muis oor 'n element beweeg
- Wanneer 'n invoerveld verander word
- Wanneer 'n HTML-vorm ingedien word
- Wanneer 'n gebruiker 'n sleutel slaan
In hierdie voorbeeld word die inhoud van die <h1>element verander wanneer 'n gebruiker daarop klik:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
In hierdie voorbeeld word 'n funksie vanaf die gebeurtenishanteerder geroep:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTML gebeurtenis eienskappe
Om gebeurtenisse aan HTML-elemente toe te ken, kan u gebeurteniskenmerke gebruik.
Voorbeeld
Ken 'n onclick-gebeurtenis aan 'n knoppie-element toe:
<button onclick="displayDate()">Try it</button>
In die voorbeeld hierbo sal 'n funksie met die naam displayDateuitgevoer word wanneer die knoppie geklik word.
Ken gebeurtenisse toe deur die HTML DOM te gebruik
Die HTML DOM laat jou toe om gebeurtenisse aan HTML-elemente toe te wys deur JavaScript te gebruik:
Voorbeeld
Ken 'n onclick-gebeurtenis aan 'n knoppie-element toe:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
In die voorbeeld hierbo word 'n funksie met die naam displayDateaan 'n HTML-element met die id="myBtn".
Die funksie sal uitgevoer word wanneer die knoppie geklik word.
Die aan- en aflaai-gebeurtenisse
Die onloaden onunloadgebeure word geaktiveer wanneer die gebruiker die bladsy binnegaan of verlaat.
Die onloadgeleentheid kan gebruik word om die besoeker se blaaiertipe en blaaierweergawe na te gaan, en die korrekte weergawe van die webblad op grond van die inligting te laai.
Die onloaden onunloadgebeure kan gebruik word om koekies te hanteer.
Voorbeeld
<body onload="checkCookies()">
Die onchange Event
Die onchangegebeurtenis word dikwels in kombinasie met validering van invoervelde gebruik.
Hieronder is 'n voorbeeld van hoe om die onchange te gebruik. Die upperCase()
funksie sal genoem word wanneer 'n gebruiker die inhoud van 'n invoerveld verander.
Voorbeeld
<input type="text" id="fname"
onchange="upperCase()">
Die onmouseover- en onmouseout-gebeurtenisse
Die onmouseoveren onmouseoutgebeurtenisse kan gebruik word om 'n funksie te aktiveer wanneer die gebruiker oor of uit 'n HTML-element beweeg:
Die onmousedown, onmouseup en onclick Events
Die onmousedown, onmouseup, en onclickgebeurtenisse is almal dele van 'n muisklik. Eers wanneer 'n muisknoppie geklik word, word die onmousedown-gebeurtenis geaktiveer, dan, wanneer die muis-knoppie vrygestel word, word die onmouseup-gebeurtenis geaktiveer, uiteindelik, wanneer die muisklik voltooi is, word die onclick-gebeurtenis geaktiveer.
Meer voorbeelde
Verander 'n prent wanneer 'n gebruiker die muisknoppie inhou.
Vertoon 'n waarskuwingskassie wanneer die bladsy klaar gelaai het.
Verander die agtergrondkleur van 'n invoerveld wanneer dit fokus kry.
Verander die kleur van 'n element wanneer die wyser daaroor beweeg.
HTML DOM Event Object Verwysing
Vir 'n lys van alle HTML DOM-gebeurtenisse, kyk na ons volledige HTML DOM Event Object Reference .