Events
Hvad er et event
Event er et vigtigt bindeled mellem html og JavaScript. For det meste anvendes event i form af attributter i html-tags. Event starter altid med on, som f.eks. onclick=. Efter lighedstegnet kommer JavaScript kommandoen. 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 eksempel kan vi bruge onClick-eventet på en knap for at angive, at en funktion vil starte, når en bruger klikker på knappen.
Eksempler på events: onclick -> Man klikker og en funktion sker. onmouseover -> Når man fører musen hen over noget starter en function. onchange -> Når der sker en ændring sker der noget.
Der er vist eksempler på forskellige events på w3schools.com[1]
Onclick
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.
<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>
Her er et eksempel -> Det der sker er når man trykker på knappen vises tid og dato.
Onmouseover
Onmouseover udfører handling når musen føres hen over elementet.
<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>
Her er et eksempel -> Når du fører musen hen over skriften ændre den sig til en anden tekst. Det er onmouseover som gør at teksten ændres.
Onfocus
Handling udføres når der sættes fokus på elementet - altså når man klikker på objektet på siden. Dette kan F.eks. være en lille tekst boks som man klikker på med musen og så sker handlingen. Dette gør den fordi onfocus er i brug og dermed er tekstboksen i "fokus".
<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>
Her er et eksempel -> når du klikker på boksene kommer der forskellige tekster fordi de er i fokus.
Andre Events
Keyboard event er den event der udløses, når der trykkes på en tast. Der udløses faktisk hele 3 events.
Hele det område der hedder Tid i javaScript er også eventdrevet
En samlet oversigt over events kan ses på w3schools[2]
Referencer
- ↑ http://www.w3schools.com/js/js_htmldom_events.asp w3schools javaScript event beskrivelse
- ↑ http://www.w3schools.com/jsref/dom_obj_event.asp w3schools domain object model events
| 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 |