Globale linker
JavaScript
- JavaScript intro
- Plassering
- 1ste script
- Store Bokstaver
- Reserverte ord
- Pop-up bokser
- Variabler
- Operatorer
- If og Else
- Funksjoner
- Events
- Loops
- Arrays
- Objekter
- DOM
- Properties
- Methods
- Dato objektet
- Småtips
- Oppgaver
Events
Events er begivenheter som kan oppdages av browseren og JavaScript.
Et eksempel på dette kan være onMouseOver event'et, som blir oppdaget når musepekeren flyttes over et objekt.
En annen event er onLoad event'et, som blir oppdaget så snart en side er ferdig lastet.
Som regel brukes events i kombinasjon, slik at funksjonen ikke starter ikke starter før event'et inntreffer.
Et eksempel kan være en funsjon som «animerer» en knapp. En slik funksjon bytter bare to bilder. Et bilde som vises i en normal-status, og et annet som vises når musepekeren er over knappen ved hjelp av onMouseOver-eventet'et.
Følgende er de vanligste event handlers som vi bruker i JavaScript:
| Event Handle | Oppdaget når: |
| onFocus | Skjemafelt får fokus |
| onBlur | Skjemafelt mister fokus |
| onChange | Innholdet i et skjemafelt forandres |
| onMouseOver | Musepeker over et objekt |
| onMouseOut | Musepeker forlater et objekt |
| onClick | Det klikkes på et objekt |
| onLoad | Når en side er ferdig lastet |
| onUnload | Når det åpnes en ny side i vinduet |
| onSubmit | Når et skjema sendes |
| Det finnes også en rekke andre event handlers som: onDblClick, onDragDrop, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseUp, onMove, onSelect, onResize, onReset. |
|
Vi bruker altså disse event handlerne når vi vil at en funksjon skal kjøres når en bestemt begivenhet finner sted.
onFocus, onBlur og onChange blir for det meste brukt i forbindelse med validering av skjemafelt.
La oss tenke oss at vi har en funksjon som vi kaller validateEmail() som sjekker om brukeren har skrevet inn en email-adresse i et tekstfelt.
Da kunne vi brukt onChange event'et for å kalle opp funksjonen når brukeren forandrer innholdet i skjemafeltet:
<input type="text" size="20" onChange="validateEmail();">
onLoad og onUnload blir for det meste brukt for popups når brukeren kommer inn på siden, eller forlater siden. Dette er usansynlig kjedelig å bli utsatt for som bruker, så det bør bare brukes når det er absolutt nødvendig, f.eks. passord beskyttede sider. En annen viktig bruk er i forbindelse med cookies, som bør gjøres når brukeren kommer inn på siden.
onSubmit brukes til å validere skjemafelt i et skjema før det blir sendt.
I eksempelet fra OnChange, så vi hvordan vi kunne validere et enkelt felt. Det er minst like irriterende å få alertbokser i skjemaer som popup-vinduer. Det beste er nok å validere alle feltene i det brukeren klikker på Submit-knappen. Og da brukes onSubmit.
Så la oss tenke oss at vi har laget en funksjon som sjekker de skjemafeltene i et skjema som er viktige at en bruker fyller ut. Denne funksjonen kaller vi checkForm.
<form method="..." action="..." onSubmit="checkForm();">
Funksjonen checkForm() returnerer enten true eller false.
Hvis den returnerer true vil skjemaet sendes.
Hvis den returnerer false vil skjemaet ikke sendes.
onMouseOver og onMouseOut brukes mest for å lage rolloverknapper.
Disse er best brukt med link taggen <a>, men kan også brukes direkte i <img>-taggen.
Et eksempel: en alert-boks dukker opp ved onMouseOver:
<a href="#" onMouseOver="alert('Jeg oppdaget en onMouseOver'); return false;"><img src="bilde.gif" width="100" height="100"></a>
NB!: href="#" linker bildet til ingensteder. Det er en dummylink.
Viktig regel:
ved onMouseOver="alert('Jeg oppdaget en onMouseOver'); return false;" er det brukt enkle fnutter rundt teksten inne i parentesen. Dette må det være for ellers vil JavaScript oppfatte budskapet som onMouseOver="alert(".
Dette er nok en vanlig feil å gjøre. Så pass på at du innefor doble fnutter bruker enkle fnutter, eller omvendt.
