HTML DOM Event


Detta är en översättning av W3C:s hemsida om HTML DOM Event.

HTML DOM Event möjliggör för Javascript att registrera olika händelser som sker med koppling till element i ett HTML-dokument (med element menar jag alla delar av en webbplats, inklusive webbläsaren). Detta ska fungera som en referens över alla dom event som kan registreras.

Event används normalt i kombination med funktioner, och funktionen kommer då att exekveras när event inträffar (till exempel när en användare klickar på en knapp).

Exempel:

…och så lite JavaScript:

DOM Event ›› Exempel med onfocus och onfocusout

DOM Event ›› Exempel med onfocus och onfocusout

Klicka i input fältet och klicka sedan utanför och bevittna magin 🙂


 

Notering: Händelsemodellen standardiserades av W3C i DOM Level 2.


DOM: Anger i vilken DOM nivå egenskapen infördes.

Mus Event

(Länkarna går till W3C:s hemsida om HTML DOM event i fråga)

Event Beskrivning DOM
onclick Händelsen inträffar när användaren klickar på ett element 2
oncontextmenu Händelsen inträffar när användaren högerklickar på ett element för att öppna en kontext meny 3
ondblclick Händelsen inträffar när användaren dubbelklickar på ett element 2
onmousedown Event inträffar när användaren trycker på en musknapp över ett element 2
onmouseenter Händelsen inträffar när muspekaren flyttas till ett element 2
onmouseleave Händelsen inträffar när muspekaren flyttas från ett element 2
onmousemove Händelsen inträffar när muspekaren rör sig när det är över ett element 2
onmouseover Händelsen inträffar när pekaren flyttas till ett element, eller på en av sina barn 2
onmouseout Händelsen inträffar när en användare flyttar muspekaren ut av ett element, eller av en av dess barn 2
onmouseup Händelsen inträffar när en användare släpper en musknapp över ett element 2

 

Keyboard Event

Händelsen Beskrivning DOM
onkeydown Händelsen inträffar när användaren har tryckt ner en tangent 2
onkeypress Händelsen inträffar när användaren trycker på en tangent 2
onkeyup Händelsen inträffar när användaren släpper en tangent 2

 

Fönster/Object Event

Event Beskrivning DOM
onabort Händelsen inträffar när laddning av en resurs har avbrutits 2
onbeforeunload Händelsen inträffar innan dokumentet är på väg att avladdas
onerror Händelsen inträffar när ett fel uppstår vid laddning en extern fil 2
onhashchange Händelsen inträffar när det har skett förändringar i ankar-delen av en URL 3
onload Händelsen inträffar när ett objekt har laddats 2
onpageshow Händelsen inträffar när användaren navigerar till en webbsida 3
onpagehide Händelsen inträffar när användaren navigerar bort från en webbsida 3
onresize Händelsen inträffar när dokumentfönstrets storlek ändras 2
onscroll Händelsen inträffar när ett elements rullningslist scrollas 2
onunload Händelsen inträffar när en sida har avladdats (för <body>) 2

 

 

Formulär Event

Event Beskrivning DOM
onblur Händelsen inträffar när ett elementet förlorar fokus 2
onchange Händelsen inträffar när innehållet i ett formulärelement, det som är valt, eller checked tillståndet förändrats (för <input>, <keygen>, <select> och <textarea>) 2
onfocus Händelsen inträffar när ett element blir fokus 2
onfocusin Händelsen inträffar när en del är på väg att få fokus 2
onfocusout Händelsen inträffar när en element är på väg att tappa fokus 2
oninput Händelsen inträffar när ett element får användarens input 3
oninvalid Händelsen inträffar när ett element är ogiltig 3
onreset Händelsen inträffar när ett formulär nollställs 2
onsearch Händelsen inträffar när användaren skriver något i ett sökfält (för <input = ”search”>) 3
onselect Händelsen inträffar när användaren markerar text (för <input> och <textarea>) 2
onsubmit Händelsen inträffar när ett formulär skickas 2

 

 

Släp Events

Event Beskrivning DOM
ondrag Händelsen inträffar när ett element släpas 3
ondragend Händelsen inträffar när användaren har avslutat dra ett element 3
ondragenter Händelsen inträffar när det släpade elementet kommer in i droppmål 3
ondragleave Händelsen inträffar när det släpade elementet lämnar droppmål 3
ondragover Händelsen inträffar när dras elementet är över droppmål 3
ondragstart Händelsen inträffar när användaren börjar att dra ett element 3
ondrop Händelsen inträffar när släpade elementet släpps på droppmål 3

 

 

Klippbords Event

Event Beskrivning DOM
oncopy Händelsen inträffar när användaren kopierar innehållet i ett element
oncut Händelsen inträffar när användaren klipper ut innehållet i ett element
onpaste Händelsen inträffar när användaren klistrar in en del innehåll i ett element

 

Print Event

Event Beskrivning DOM
onafterprint Händelsen inträffar när en sida har börjat skriva ut, eller om utskrifts dialogrutan har stängts 3
onbeforeprint Händelsen inträffar när en sida är på väg att skrivas ut 3

 

 

Media Event

Event

Beskrivning

DOM

onabort Händelsen inträffar när laddning av ett medium avbryts 3
oncanplay Händelsen inträffar när webbläsaren kan börja spela media (när det har buffrat tillräckligt för att börja) 3
oncanplaythrough Händelsen inträffar när webbläsaren kan spela media utan att stanna för buffring 3
ondurationchange Händelsen inträffar när varaktigheten av media förändras 3
onemptied Händelsen inträffar när något dåligt händer och mediefilen är plötsligt inte tillgänglig (som oväntad frånkoppling) 3
onended Händelsen inträffar när mediet har nått slutet (användbart för meddelanden som ”Tack för att du lyssnar”) 3
onerror Händelsen inträffar när ett fel uppstod under laddning av en mediefil 3
onloadeddata Händelsen inträffar när mediedata är laddad 3
onloadedmetadata Händelsen inträffar när metadata (som mått och varaktighet) är laddad 3
onloadstart Händelsen inträffar när webbläsaren börjar leta efter den angivna medie 3
onpause Händelsen inträffar när mediet pausas antingen av användaren eller programmatiskt 3
onplay Händelsen inträffar när mediet har startats eller är inte längre pausad 3
onplaying Händelsen inträffar när mediet spelas efter att ha pausat eller stoppas för buffring 3
onprogress Händelsen inträffar när webbläsaren är i färd med att få mediedata (håller på att ladda ner media) 3
onratechange Händelsen inträffar när uppspelningshastigheten av media förändras 3
onseeked Händelsen inträffar när användaren är färdig med att flytta / hoppa till nya positioner i media 3
onseeking Händelsen inträffar när användaren börjar flytta / hoppa till en ny position i media 3
onstalled Händelsen inträffar när webbläsaren försöker få mediedata, men data är inte tillgänglig 3
onsuspend Händelsen inträffar när webbläsaren avsiktligt inte få mediedata 3
ontimeupdate Händelsen inträffar när uppspelnings platsen har förändrat (som när användaren snabbspolar framåt till en annan punkt) 3
onvolumechange Händelsen inträffar när volymen av media har förändrats (inkluderar att ställa in volymen på ”mute”) 3
onwaiting Händelsen inträffar när mediet har pausat men förväntas återuppta (som när media pauser för att buffra mer data) 3

 

 

Animations Event

Event Beskrivning DOM
animationend Händelsen inträffar när en CSS-animering har avslutat 3
animationiteration Händelsen inträffar när en CSS-animering upprepas 3
animationstart Händelsen inträffar när en CSS-animering har börjat 3

 

 

CSS Transition Event

Event Beskrivning DOM
transitionend Händelsen inträffar när en CSS transition har avslutat 3

 

 

Server Skickade Event

Event Beskrivning DOM
onerror Händelsen inträffar när ett fel uppstår med händelsekällan
onmessage Händelsen inträffar när ett meddelande mottas genom händelsekällan
onopen Händelsen inträffar när en anslutning med händelsekällan öppnas

 

 

Diverse Event

Event Beskrivning DOM
onmessage Händelsen inträffar när ett meddelande tas emot, genom eller från ett objekt (WebSocket, Web Worker, Händelsekälla eller ett barn ram eller en förälders fönster) 3
onmousewheel Borttagen. Använd onwheel händelse i stället
ononline Händelsen inträffar när webbläsaren börjar arbeta online 3
onoffline Händelsen inträffar när webbläsaren börjar arbeta offline 3
onpopstate Händelsen inträffar när fönstrets historia ändras 3
onshow Händelsen inträffar när en <meny> elementet visas som en kontextmeny 3
onstorage Händelsen inträffar när en ”Web Storage” område uppdateras 3
ontoggle Händelsen inträffar när användaren öppnar eller stänger <details> elementet 3
onwheel Händelsen inträffar när mushjulet rullar upp eller ner över ett element 3

 

 

Touch Event (för mobila enheter)

Event Beskrivning DOM
ontouchcancel Händelsen inträffar när beröring avbryts
ontouchend Händelsen inträffar när ett finger avlägsnas från en pekskärm
ontouchmove Händelsen inträffar när ett finger dras över skärmen
ontouchstart Händelsen inträffar när ett finger placeras på en pekskärm

 

 

Event Objekt

Konstanter

Konstant Beskrivning DOM
CAPTURING_PHASE Den aktuella händelsen fasen är insamlingsfasen (1) 1
AT_TARGET Den aktuella händelsen är i mål fasen, det vill säga det utvärderas på händelsemålet (2) 2
BUBBLING_PHASE Den aktuella händelsen fasen är bubblingsfasen (3) 3

Egenskaper

Egenskap Beskrivning DOM
bubbles Returnerar huruvida en viss händelse är en bubblande händelse 2
cancelable Returer huruvida en händelse kan ha sin standardåtgärd förhindrad 2
currentTarget Returnerar elementet vars event-lyssnare utlöste händelsen 2
defaultPrevented Returer huruvida metoden preventDefault() kallades för händelsen 3
eventPhase Returer vilken fas av händelseflödet för närvarande utvärderas 2
isTrusted Returer huruvida en händelse är betrodd 3
target Returnerar elementet som utlöste event 2
timeStamp Ger tid (i millisekunder relativt epok) som händelsen skapades 2
type Returnerar namnet på händelsen 2
view Returnerar en referens till fönsterobjektet där händelsen inträffade 2

Metoder

Method Beskrivning DOM
preventDefault() Avbryter händelse om det är annullerbara, vilket innebär att standardåtgärden som tillhör händelsen inte kommer att inträffa 2
stopImmediatePropagation() Förhindrar andra lyssnare av samma händelse från att kallas 3
stopPropagation() Förhindrar vidare propagation av en händelse under händelseflödet 2

 

 

MouseEvent Object

Egenskap Beskrivning DOM
altKey Returnerar huruvida ”ALT” -tangenten trycktes när mushändelsen triggades 2
button Returnerar vilka musknapp trycktes när mushändelsen utlöstes 2
buttons Returnerar vilka musknappar trycktes när mushändelsen utlöstes 3
clientX Returnerar horisontella koordinaten för muspekaren, i förhållande till det aktuella fönstret, när mus-event utlöstes 2
clientY Returnerar vertikala koordinaten för muspekaren, i förhållande till det aktuella fönstret, när mushändelsen utlöstes 2
ctrlKey Returnerar huruvida ”Ctrl” tangenten trycktes när mushändelsen utlöstes 2
detail Returnerar ett tal som anger hur många gånger musen klickade 2
metaKey Returnerar om ”META” -knappen trycktes när en händelse utlöstes 2
relatedTarget Returnerar elementet relaterad till element som utlöste händelsen musen 2
screenX Returnerar horisontella koordinaten för muspekaren i förhållande till skärmen, när en händelse utlöstes 2
screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered 2
shiftKey Returns whether the ”SHIFT” key was pressed when an event was triggered 2
which Returns which mouse button was pressed when the mouse event was triggered 2

 

 

KeyboardEvent Object

Egenskap Beskrivning DOM
altKey Returnerar huruvida ”ALT” -tangenten trycktes när knapp event triggades 2
ctrlKey Returnerar huruvida ”CTRL” -tangenten trycktes när knapp event triggades 2
charCode Returnerar Unicode-teckenkoden för den tangent som utlöste onkeypress event 2
key Returnerar nyckelvärdet av tangenten som representeras av event 3
keyCode Returnerar Unicode-teckenkoden för den tangent som utlöste onkeypress event, eller Unicode nyckelkoden för den tangent som utlöste onKeyDown eller onKeyUp event 2
location Returnerar platsen för en tangent på tangentbordet eller enheten 3
metaKey Returnerar huruvida ”meta” -tangenten trycktes när knapp event triggades 2
shiftKey Returnerar huruvida ”SHIFT” -tangenten trycktes när knapp event triggades 2
which Returnerar Unicode-teckenkoden för den tangent som utlöste onkeypress event, eller Unicode nyckelkoden för den nyckel som utlöste onKeyDown eller onKeyUp event 2

 

 

HashChangeEvent Object

Egenskap Beskrivning DOM
newURL Returnerar URL för dokumentet, efter att hash har ändrades
oldURL Returnerar URL för dokumentet, innan hash ändrades

 

 

PageTransitionEvent Object

Egenskap Beskrivning DOM
persisted Returnerar om webbsidan var cachad av webbläsaren

 

 

FocusEvent Object

Egenskap Beskrivning DOM
relatedTarget Returnerar elementet relaterad till element som utlöste händelsen 3

 

 

AnimationEvent Object

Egenskap Beskrivning DOM
animationName Returnerar namnet på animeringen
elapsedTime Returnerar antalet sekunder en animering har varit igång

 

 

TransitionEvent Object

Egenskap Beskrivning DOM
propertyName Returnerar namnet på CSS-egenskap som är förbunden med transitionen
elapsedTime Returnerar antalet sekunder en transition har varit igång

 

 

WheelEvent Object

Egenskap Beskrivning DOM
deltaX Returnerar vågräta rullnings mängden av en mus hjul (x-axeln) 3
deltaY Returnerar vågräta rullnings mängden av en mus hjul (y-axeln) 3
deltaZ Returnerar vågräta rullnings mängden av en mus hjul (z-axeln) 3
deltaMode Returnerar ett tal som representerar enheten för mätningar för delta-värden (pixlar, linjer eller sidor) 3

Källhänvisning

W3C:s hemsida om HTML DOM Event

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *