|
 |
|
Offentliggjort 2003 - Opdateret n/a
Lektion 06
Lektionen beskriver de mest anvendte event handlere
Indhold
 Indledning
Event-Handler er et vigtigt bindeled mellem html og JavaScript. For det meste anvendes event-handler i form af attributter i html-tags.
Event-handler starter altid med on, som f.eks. onclick=. Efter lighedstegnet kommer JavaScript kommandoen omsluttet af situationstegn. Har du flere kommandoer som skal udføres, er det en god ide at lægge dem i en funktion, og efterfølgende kalde dem med onclick="etellerandet()"
For at kunne validere xhtml dokumenter er du nødsaget til at skrive event handler med småt. Det betyder at selvom OnClick og onclick udfører samme handling, vil kun onclick validere efter xhtml retningslinier.
Selvom du får dine dokumenter valideret med de valgte attributter, skal du være opmærksom på at de forskellige browser versioner tolker JavaScript forskelligt.
"Mouse" relaterede events
onclick
En af de meste anvendte attributter er onclick. Denne fortæller browseren at hente/udføre et script når et element klikkes med musen.
onclick attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onclick</title>
</head><body>
<form name="test" action="">
<input size="35" name="retur" readonly><br />
<input type="button" value="Seneste opdatering"
onclick="this.form.retur.value=document.lastModified">
</form>
</body></html>
Vis som eksempel
ondblclick
Samme som onclick, bortset fra at der skal dobbelt klikkes.
ondblclick attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>ondblclick</title>
</head><body>
<form name="test" action="">
<input size="35" name="retur" readonly><br />
<input type="button" value="Seneste opdatering"
ondblclick="this.form.retur.value=document.lastModified">
</form>
</body></html>
Vis som eksempel
onmousedown
onmousedown attributten aktiveres når mus tasten klikkes ned på elementet.
onmousedown attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onmousedown</title>
</head><body>
<a href="dummy.htm"
onmousedown="window.status='Retur til index siden';return true;">hjem</a>
</body></html>
Vis som eksempel .... Hold øje med status bjælke. ... Hold musetasten nede!
onmouseup
Som onmousedown, bare omvendt. onmouseup attributten aktiverer handlingen når muse tasten slippes på elementet.
onmouseup attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onmouseup</title>
</head><body>
<a href="dummy.htm"
onmouseup="alert('Du ryger retur til index siden'); window.location.href='dummy.htm'; return false">Hjem</a>
</body></html>
Vis som eksempel
onmousemove
onmousemove attributten udfører en handling når musen flyttes indenfor elementets rammer.
onmousemove attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
onmouseout
onmouseout attributten udfører handlink når musen føres ud fra elementet.
onmouseout attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onmouseout</title>
</head><body>
<a href="dummy.htm"
onmouseout="alert('Linket fører dig retur til index siden')"><b>Hjem</b></a>
</body></html>
Vis som eksempel .... Kør musen over link og væk igen.
onmouseover
onmouseover udfører handling når musen føres hen over elementet.
onmouseover attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onmouseover</title>
</head><body>
<h1 id="test"
onmouseover="this.innerHTML='Læs videre og se hvad de andre event handler anvendes til'"
onmouseout="this.innerHTML='Hej og velkommen til JavaScript lektioner'">Hej og velkommen til JavaScript lektioner</h1>
</body></html>
Vis som eksempel .... Før musen over teksten.
"Key" relaterede events
onkeydown
onkeydown attributten udfører handling når en knap klikkes medens et element er aktiv.
onkeydown attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onkeydown</title>
<script type="text/javascript">
function opdater() {
document.test.check.value = document.test.indtastning.value.length + 1;
return true;
}
</script>
</head><body>
<form name="test" action="">
Indtast et eller andet:<br>
<input type="text" name="indtastning" size="40" onkeydown="opdater(this.value)">
<input type="text" value="0" readonly size="3" name="check"><br />
<input type="reset">
</form>
</body></html>
Vis som eksempel
onkeyup
Handling udføres når brugeren har trykket på en knap, og denne igen slippes.
onkeyup attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onkeyup</title>
</head><body>
<form name="test" action="">
<input type="text" size="35" name="indtastning"
onkeyup="this.form.retur.value=this.value"><br />
<input type="text" readonly size="35" name="retur"><br />
<input type="reset">
</form>
</body></html>
Vis som eksempel
onkeypress
Handling udføres når en knap klikkes og holdes.
onkeypress attributten virker sammen med alle elementer bortset fra: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title.
<html><head><title>onkeypress</title>
</head><body>
<form name="test" action="">
<input type="text" size="35" name="indtastning"
onkeypress="alert(this.value)">
</form>
</body></html>
Vis som eksempel
"Focus" relaterede events
onfocus
Handling udføres når der sættes fokus på elementet. F.eks. i et formular felt, når cursoren blinker.
onfocus udfører handling i forbindelse med følgende elementer: a, area, button, input, label, select, textarea.
<html><head><title>onfocus</title>
</head><body>
<form name="test" action="">
<input size="35" onfocus="this.value='Her er en tekst'"><br />
<input size="35" onfocus="this.value='Dette er en anden tekst'"><br />
<input size="35" onfocus="this.value='En sidste tekst'"><br />
</form>
</body></html>
Vis som eksempel .... Klik i felterne.
onblur
Modsat onfocus. Handling udføres når du forlader et allerede igangsat hændelse.
onblur udfører handling i forbindelse med følgende elementer: a, area, button, input, label, select, textarea.
<html><head><title>onblur</title>
</head><body>
<form name="test" action="">
Dit navn: <input type="text" name="indtastning" onblur="kontrol(this.value)"><br />
angiv navn eller ingenting, klik vilkårlig sted i vinduet!
</form>
<script type="text/javascript">
document.test.indtastning.focus();
function kontrol(felt)
{
if(felt == "") {
alert("Udfyld navnefeltet!");
document.test.indtastning.focus();
return false;
}
}
</script>
</body></html>
Vis som eksempel
"Form" specifik events
onchange
Handling udføres når et elements værdi ændres.
onchange udfører handling i forbindelse med følgende elementer: input, select, textarea.
<html><head><title>onchange</title>
</head><body>
<form name="test" action="">
<textarea rows="5" cols="35" onchange="alert(this.value)">Ret i denne tekst og klik derefter et andet sted på skærmen. Læg mærke til at teksten ændres tilsvarende.</textarea>
</body></html>
Vis som eksempel
onselect
Handling udføres når tekst markeres. F.eks. kan der vises besked i status bjælken når teksten markeres.
onselect udfører handling i forbindelse med følgende elementer: input, textarea.
<html><head><title>onselect</title>
</head><body>
<form name="test" action="">
<textarea cols="45" rows="8" name="indtastning" onselect="window.status='Marker teksten og højreklik efterfølgende på denne.'; return true;">Marker et viklet som helst del af denne tekst.</textarea>
</form>
</body></html>
Vis som eksempel .... Læg mærke til status bjælke!
onreset
Handling udføres når der tastes på reset knap.
onreset udfører handling i forbindelse med følgende elementer: form.
<html><head><title>onreset</title>
<script type="text/javascript">
function ResetCheck() {
var chk = window.confirm("Skal det indtastede slettes?");
return(chk);
}
</script>
</head><body>
<form name="test" onreset="return ResetCheck()" action=""><pre>
Dit navn: <input size="35"><br />
Din alder: <input size="35"><br />
<input type="reset">
</pre></form>
</body></html>
Vis som eksempel
onsubmit
Handling udføres når der klikes submit knappen.
onsubmit udfører handling i forbindelse med følgende elementer: form.
<html><head><title>onsubmit</title>
<script type="text/javascript">
<!--
function kontrol() {
for(i=0; i<document.forms[0].elements.length; ++i)
if(document.forms[0].elements[i].value == "") {
alert("Ups! Du mangler at udfylde nogle felter!");
document.forms[0].elements[i].focus();
return false;
}
return true;
}
//-->
</script>
</head><body>
<form action="dummy.htm" onsubmit="return kontrol();">
Felt 1: <input size="35"><br />
Felt 2: <input size="35"><br />
Felt 3: <input size="35"><br />
<input type="submit">
</form>
</body></html>
Vis som eksempel .... Udfyld kun et eller to af felterne!
"Page" og "frame" relaterede events
onabort
Når der klikkes på stop knappen i browseren, og alle billeder endnu ikke er hentet, kan onabort anvendes. Der vises en besked!
<html><head><title>onabort</title>
</head><body>
<img src="etbillede.jpg" width="300" height="400" alt=" "
onabort="alert('Du nåede ikke at se dette billede')">
</body></html>
onload
Handling udføres når siden eller rammen er hentet ind i browseren.
onload udfører handling i forbindelse med følgende elementer: body, frameset.
<html><head><title>onload</title>
<script type="text/javascript">
<!--
function navigationsBAR() {
navigation = window.open("dummy_menu.htm","navigation","height=150,width=150");
navigation.focus();
}
// -->
</script>
</head>
<body onload="navigationsBAR()">
<h1>Hej og velkommen til min side. Du finder menu punkterne i separat vindue.</h1>
</body></html>
Vis som eksempel
Her er koden til den anvendte menu.
<html><head><title>dummy_menu</title>
</head><body>
<a href="javascript:void(opener.location.href='dummy.htm');">Hjem</a><br />
<a href="javascript:void(opener.location.href='dummy1.htm');">Familie</a><br />
<a href="javascript:void(opener.location.href='dummy2.htm');">Vores dyr</a><br />
</body></html>
onunload
Handling udføres når siden eller rammen/frameset forlades.
onunload udfører handling i forbindelse med følgende elementer: body, frameset.
Videre til næste lektion der omhandler løkker.
LØKKER >>
|
