Event-handler

Når der sker en 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:

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

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:

function changeHand(obj) {
	obj.style.cursor = "crosshair";
}

Det der sker er at event-handleren ændrer udseendet af cursoren fra at være en standard hånd til at være crosshair (et sigte-kryds) som vist her:

Koden kan hentes i denne 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:

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

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:

function sikkerhed() {
	var svar = confirm("Vil du henvises til den linkede side?");
	return svar;
}

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 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():

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

Event-handleren anvender variabelen 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.
Herefter henvender den sig til et objekt i HTML-koden og ændrer indholdet til det der står i variablen tal.
Til slut tælles tal en op. Dette kan ses i følgende kode:

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

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

<p id="etFelt">Noget indhold</p>

Koden kan hentes i denne ZIP-fil i filen event3.html.

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include