HOME -> JS_TUTORIAL -> js-06 Tirsdag, 27. Juni 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2003 - Opdateret n/a

Lektion 06

Lektionen beskriver de mest anvendte event handlere

Indhold

 

TopIndledning
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.

 

Top"Mouse" relaterede events

 

Toponclick
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

 

Topondblclick
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

 

Toponmousedown
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!

 

Toponmouseup
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

 

Toponmousemove
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.

 

Toponmouseout
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.

 

Toponmouseover
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.

 

Top"Key" relaterede events

 

Toponkeydown
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

 

Toponkeyup
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

 

Toponkeypress
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

 

Top"Focus" relaterede events

 

Toponfocus
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.

 

Toponblur
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

 

Top"Form" specifik events

 

Toponchange
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

 

Toponselect
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!

 

Toponreset
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

 

Toponsubmit
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!

 

Top"Page" og "frame" relaterede events

 

Toponabort
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>


 

Toponload
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>


 

Toponunload
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 >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top