|
Administreres af: |
| Hændelser | Tilbage til oversigtstabel Tilbage |
Af: novicen.dk
Hændelser
Alt hvad du foretager dig er i bund og grund hændelser. Bevæger du dig i forbindelse med en gåtur, er hændelse "at gå" og hvis du skal aktivere en speciel tilstand - evt. at du skal have hat på - skal hændelsen, som gør at du tager hatten på, være "ved gang". Løbesko anvendes ved hændelse "ved løb" osv.
Tilsvarende er der på en hjemmeside en masse hændelser, som kan registreres og som kan starte forskellige andre affødte handlinger. Eksempelvis, når du fører musen ind over et billede eller en link (onMouseOver), når du klikker på billedet eller linken (onClick) eller når du fører musen tilbage igen (onMouseOut).
Du har set eksempler på hændelser på startsiden andetsteds i denne introduktion, og som giver en praktisk indføring til JavaScript.
Når et dokument indlæses og er helt indlæst i browservinduet kan hændelsen onLoad effektueres og når siden "udlæses" - fjernes - fra browseren kan hændelsen onUnLoad effektueres.
Der kan bygges hændelser på de fleste aktive elementer i et HTML-dokument. Det er forskelligt, hvilke hændelser der virker på de forskellige aktive elementer og du vil i starten formodentlig have glæde af at eksperimentere med, hvilke hændelser der kan virke hvor - og hvilke der virker forskelligt i de forskellige browsere.
Understående er givet eksempler på tre hændelser, der alle kan aktiveres i forbindelse med links.
| onMouseOver | onClick | onMouseOut |
Hændelser kaldes på engelsk for "events" og du kan ofte støde på dette udtryk, når du søger efter supplerende oplysninger. Koden indsættes som hændelsesNavn="affødtHandling" og det giver for de ovenfor viste hændelser følgende koder i link TAG'en:
onMouseOver:
<a href="JavaScript:void(0)"
onmouseover='alert("Du har ført musen ind over linket\n\nTryk på retur-tasten")'
>onMouseOver</a>
onClick:
<a href="JavaScript:void(0)"
onclick='alert("Du har klikket på linket\n\nTryk på retur-tasten")'
>onClick</a>
onMouseOut:
<a href="JavaScript:void(0)"
onmouseout='alert("Du har ført musen væk fra linket\n\nTryk på retur-tasten")'
>onMouseOut</a>
Vær her også opmærksom på kodestykket for href'en, som er sat til JavaScript:void(0). Dette kodestykke gør, at linken registreres som aktiv men at der ikke foretages nogen handling. void(0) er en indbygget JavaScript funktion, som intet gør. Den kan bruges i sådanne tilfælde, hvor vi alene skal anvende hændelser men hvor vi har brug for den aktive del - her href'en - til at gøre vore hændelse brugbar.
Hvis href-koden fjernes fra a-TAG'en er der ikke længere tale om en link og derfor kræves denne eller en tilsvarende omgåelse/aktivering før hændelserne er allround og 100% brugbare.
Liste over almindelige hændelser og deres brugbarhed:
| Hændelse/TAG | BODY | formularfelter | |
| onMouseOver | Ok | - | - |
| onClick | Ok | - | Ok |
| onMouseOut | Ok | - | - |
| onLoad | - | Ok | - |
| onUnLoad | - | Ok | - |
| onFocus | (Ok) | Ok | Ok |
| onBlur | - | Ok | Ok |
| onChange | - | - | Ok |
Listen er ikke entydig og der er flere hændelser end angivet. onFocus har egentlig ikke direkte relevans for brug på link's men du har sikkert set den karakteristiske Microsoft sørgerand, som kan fremkomme, når du i Internet Explorer klikker på en link. Denne rand kan fjernes ved at der indsættes en onFocus="this.blur()" som hændelse i link TAG'en.
Du kunne påtage dig den opgave, at lave en sådan side i din egen editor, hvor du opretter to link's. Den ene link skal være med onFocus hændelsen og den anden skal være foruden. Test resultatet i Explorer browseren og se forskellen.
For hændelser, som indsættes ved formularfelter, skal hændelsen indsættes i selve feltets kodeboks:
<form><input type="text" value="Skriv en ny tekst" size="24"
onChange='alert("Du har ændret teksten i feltet\n\nTryk på retur-tasten")'></form>
Aktuelt vil onChange hændelsen blive aktiveret, når du fjerner musen fra tekstfeltet - altså når du klikker et andet sted end i feltet. For alle formularfelter gælder det, at indsætning af hændelser sker i selve TAG'en.
Bemærk, at du ikke med fordel kan anvende hændelser på en submit-knap, da submit-funktionen (send formularen) i alle tilfælde vil blive udført. Skal du derfor lave test af formulardataenes gyldighed, inden formularen sendes, kan du i stedet anvende en button, hvori du indsætter en onClick hændelse og anvende en document.formularNavn.submit() til at aktivere afsendelsen. Se siden med kontrol af formulardata for yderligere oplysninger.
Hændelser der vedrører BODY TAG'en skal indsættes i selve TAG'en på tilsvarende måde, som angivet for formularfelter:
<BODY onBlur="self.close()">
| Til top |