JavaScript — Introduktion genom exempel

3.2 Musens händelser

För musen finns ett antal händelser som hör ihop med hur användaren trycker på musknapparna, såsom trycker ner, släpper upp, klickar och dubbelklickar. Det finns också händelser för hur muspekaren förs in eller ut över ett element. Exemplet består av två delar:

1. Test av några olika händelser för musen.
2. Exempel på produktpresentation, där olika mushändelser används.

Sammanfattning

• Händelserna mouseenter och mouseleave inträffar endast en gång för det element som händelsehanteraren lagts på, även om muspekaren förs över underelement till detta element.
• Händelserna mouseover och mouseout inträffar även då muspekaren förs över underelementen. Förs pekaren in över ett underelement inträffar först mouseout, eftersom pekaren då lämnar huvudelementet. Men sedan inträffar mouseover igen som då "bubblar" upp till huvudelementet.
• En del händelser överlappar varandra, t.ex. är ett dubbelklick två klick, så har man händelsehanterare för båda dessa, kommer båda funktionerna anropas.
• Med e.type kan man avgöra vilken händelse som inträffat, vilket är användbart, om man har samma funktion för flera händelser.
• Med egenskaper som e.shiftKey, e.altKey och e.cgtrlKey, kan man avgöra om användaren tryckt ner någon av dessa tangenter samtidigt som mushändelsen inträffade.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• I filerna finns programmet med de sex djuren. Lägg till kod för följande:
  • Då man pekar på ett djur, ska dess namn visas i elementet för meddelande. Det är alltså namnet som finns i elementet figcaption som ska visas i elementet som variabeln msgElem representerar.
  • Då man för bort muspekaren från djuret, ska namnet tas bort ur elementet för meddelanden igen. Elementet för meddelanden ska alltså tömmas.