Events

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

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

  1. http://www.w3schools.com/js/js_htmldom_events.asp w3schools javaScript event beskrivelse
  2. http://www.w3schools.com/jsref/dom_obj_event.asp w3schools domain object model events