Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Javascript og eventhandlers

Forord

Denne artikel gennemgår håndtering af eventhandlers i javascript.
Meningen med denne artikel er at du efter du har læst den skal være i stand til selv at arbejde med eventhandlers ud fra den liste jeg har sendt med til artiklen.

Events i javascript


I denne artikel vil jeg prøve at komme omkring event håndtering i javascript.
Events i javascript er i bund og grund en måde at eksekvere noget kode når en eller flere events køres.
Det kan f.eks være når brugeren klikker på et billede, eller når et bestemt element i koden loades færdigt.

Det første jeg vil gennemgå er de forskellige "mouse-events" altså ting der sker når man bevæger eller klikker med musen.
Vi starter ud med dette simple eksempel.
  1.     <script type="text/javascript">
  2.         function myFunc(src) {
  3.             alert(src);
  4.         }
  5.     </script>
  6.     <img src="http://www.google.dk/intl/en_com/images/logo_plain.png" alt="" onclick="myFunc(this.src);" />

Ovenstående kode er en simpel kode der indeholder en javascript funktion der alert'er dets parameter. Samt et billede hvor der er sat en eventhandler på.
I eksemplet har jeg brugt "onclick" eventen som fyres af når der klikkes på det element det er sat på.
Hvis du prøver at kopiere eksemplet over i en HTML fil og åbne det i din browser, så sker der ikke noget umiddelbart. Men hvis du prøver at klikke på billedet, vil du få en alert boks der indeholder stien til billedet.
Det var et meget simpelt eksempel på brug af event handlers i javascript.

Følgende er de event handlers jeg umiddelbart kan komme i tanke om, der omhandler brugen af musen.
onclick : Fyres af når brugeren klikker på elementet.
ondbclick : Fyres af når brugeren dobbelklikker på elementet.
onmouseover : Fyres af når musen føres henover elementet.
onmouseout : Fyres af når musen føres væk fra elementet.
onmousedown : Fyres af når en museknap trykkes ned mens musen er henover elementet
onmouseup : Fyres af når en museknap slippes henover elementet.

Sætte eventhandlers via javascript

Det er også muligt at tilføje eventhandlers til elementer via javascript, det gøres med attachEvent i Internet Explorer og addEventHandler i andre browsere.

Da der skal bruges forskellige metoder til at sætte eventhandlers i de forskellige browsere skal vi først finde ud af hvilken browser det er vi arbejder med, det gøres med følgende script.
  1. if(typeof window.addEventListener != "undefined") {
  2. //addEventListener
  3. } else if(typeof document.addEventListener != "undefined") {
  4. //addEventListener
  5. } else {
  6. //attachEvent
  7. }

Først tjekkes der for addEventListener på window elementet, derefter tjekkes der for samme på document elementet.
Findes der hverken på window eller document, så er det fordi brugerens browser ikke understøtter addEventListener, og så går vi ud fra at browseren er Internet Explorer.

Nu når vi har fundet ud af hvilken browser den besøgende bruger kan vi begynde at tilføje eventhandlers til vores elementer.
I det første eksempel laver jeg en funktion som laver en simpel alert, som jeg tilføjer til et billede som skal fyres af når en bruger fører musen henover billedet.
  1. <script type="text/javascript">
  2.     function myFunc() {
  3.         alert('Denne event er tilføjet via javascript');
  4.     }
  5.     
  6.     function setEvent() {
  7.         if(typeof window.addEventListener != "undefined") {
  8.             document.getElementById('pic').addEventListener('mouseover', myFunc, false);
  9.         } else if(typeof document.addEventListener != "undefined") {
  10.             document.getElementById('pic').addEventListener('mouseover', myFunc, false);
  11.         } else {
  12.             document.getElementById('pic').attachEvent('onmouseover', myFunc);
  13.         }
  14.     }
  15.     window.onload=setEvent;
  16. </script>

  18. <img src="http://www.google.dk/intl/en_com/images/logo_plain.png" alt="" id="pic" />

Som i måske kan se på koden, så finder jeg elementet jeg vil påføre event med document.getElementById(), hvorefter jeg bruge addEventListener/attachEvent til at sætte en eventhandler som kalder funktionen "myFunc".

//__ak
www.akmedia.dk
Sidst redigeret 12:30 26/09/2009
Oprettet af:
__ak

Javascript

Point modtaget: 0

Rate:
16:42 18/08/2008

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Rigtig god artikel lærte en masse om javascript i den. Kunne ikke rigtig noget før, så den hjalp mig meget.
Oprettet af:
Mahope
  Mail
10:04 06/09/2008
Der har været sådan en tråd med "Hvor hurtige er i?"
Sådan noget med at klikke hurtigt på 30 sekunder. Det vil jeg meget gerne kunne lære, vil gætte på det er noget med javascript, html, css, input og php?
- Men hvis du evt. kunne skrive noget om sådan noget, så ville jeg være rigtig glad.. ;-)
- Ellers FLOT artikel! :-)
Oprettet af:
Jacob
  Mail
20:41 10/09/2008
til dine event handlers er der nogle nye i HTML5:
ondrag
ondrop
:D
Oprettet af:
fyhring4
  Mail
14:55 04/10/2009
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes