Se kilde til Event-handler

Når der sker en [[Events|event]] (på dansk: en hændelse) i et program, så vil der normalt skulle udføres noget.

Det der skal udføres håndteres af en Event-Handler, altså en programdel der udfører den handling der er knyttet til eventen.

==Standard Event-handlere==
I browseren er der nogle forskellige events, der sker som standard på bestemte objekter.

Et [[A-Tag]] der fungerer som et link har normalt tilknyttet forskellige event-handlere der udfører den funktion et link skal have, nemlig at viderestille til en anden side. Det er indbygget i browseren og fungerer normalt ikke som en overraskelse, at når man klikker på linket, så fører det til en ny side, og noget andet man måske ikke bemærker bevidst, at cursoren skifter form fra en pil til en hånd, for at indikere at det er et link.

==Tilføjelse af event-handlere==
Hvis man tager et standard link til http://www.google.dk, så kan man tilknytte en event-handler ved at tilføje en ekstra egenskab til linket, som vist her:

<source lang='html4strict'>
<a href="http://www.google.dk" onMouseOver="changeHand(this)">Link</a>
</source>

Virkningen er at når man kører musen ind over linkt, så opstår den event der hedder onMouseOver, og den egenskab vi har tilknyttet linket gør at changeHand funktionen bliver til event-handler for netop dette link.

Funktionen changeHand kan se ud som følger:

<source lang='javaScript'>
function changeHand(obj) {
	obj.style.cursor = "crosshair";
}
</source>

Det der sker er at event-handleren ændrer udseendet af cursoren<ref>http://www.w3schools.com/jsref/prop_style_cursor.asp Cursor style ved w3schools.com</ref> fra at være en standard hånd til at være crosshair (et sigte-kryds) som vist her:

[[fil:js_crosshair.PNG]]

Koden kan hentes i denne [[media:js_event.zip|ZIP-fil]] i filen event.html.

===Ændring af selve link-handlingen===
Man kan også ændre selve den grundlæggende link-henvisning ved at knytte en event-handler til klikket (onClick), som det er gjort i følgende kode:

<source lang='html4strict'>
<a href="http://www.google.dk" onClick="return sikkerhed()">Sikret link</a>
</source>

Virkningen er at når klikker på linkt, så opstår den event der hedder onClick, og den egenskab vi har tilknyttet linket gør at sikkerhed() funktionen bliver til event-handler for netop dette link.

Det at der står return sikkerhed() betyder at den tager retur-værdien fra sikkerhed() og fører videre til den indbyggede link-funktion. Hvis den indbyggede link-funktion får '''true''', så vil den gå til linket - hvis den får '''false''', så vil den ikke gøre noget, altså vil linket ikke virke.

Funktionen sikkerhed() kan se ud som følger:

<source lang='javaScript'>
function sikkerhed() {
	var svar = confirm("Vil du henvises til den linkede side?");
	return svar;
}
</source>

Det der sker er at event-handleren spørger om man vil henvises til den linkede side.Klikker man OK, så returneres true, og klikkes der Annuler, så returneres der false, hvilket sendes videre til den indbyggede link-eventhandler, som så reagerer på det

Koden kan hentes i denne [[media:js_event.zip|ZIP-fil]] i filen event2.html.

==At tilknytte en handling til en knap==
En meget generel anvendelse af event-handlere er at tilknytte en funktionalitet til en knap.

Knappen defineres som følger, og har tilknyttet eventhandleren handling():

<source lang='html4strict'>
<input type="Button" value="Klik for at udløse en handling" onClick="handling()" />
</source>

Event-handleren anvender [[variabel]]en tal, der starter med at være 1.

Når man klikker på knappen kaldes handling() og den starter med at komme med en besked.<br />
Herefter henvender den sig til et objekt i HTML-koden og ændrer indholdet til det der står i variablen tal.<br />
Til slut tælles tal en op. Dette kan ses i følgende kode:

<source lang='javaScript'>
var tal = 1;
function handling() {
	alert("Nu bliver en del af sidens indhold ændret");
	document.getElementById("etFelt").innerHTML = tal;
	tal++;
}
</source>

For at funktionen handling() skal kunne ændre i et objekt i HTML-koden, så skal det have et unikt id som vist her:

<source lang='html4strict'>
<p id="etFelt">Noget indhold</p>
</source>

Koden kan hentes i denne [[media:js_event.zip|ZIP-fil]] i filen event3.html.

{{webcode}}

==Referencer==
<references />
[[Kategori:Objekt]]