Händelser

Sidans innehåll

På denna sida beskrivs man kan koppla funktioner för att hantera händelser i element.

Inledning

Händelser hjälper till att göra applikationer mer interaktiva, bl.a. händelser som klick, dubbelklick, mus förs över och fokus förloras.

Den grundläggande principen för att binda en händelsehanterare (funktion) till ett elements händelse visas i exempel nedan. I det första fallet används metoden .bind() där namn på händelse och funktion skickas som argument till metod. Om vi endast vill binda funktion till en händelse så kan vi istället använda en "genväg" i form av metod med händelses namn, som i andra exemplet.

element.bind("handelse", funktion);
element.handelse(funktion); //Genvag till handelse

Till början på sida

Händelsehanterare kan bindas, och kopplas loss, med metoder nedan. Skillnaden mellan .bind() och live() (samt dess respektive motparter, .unbind() och .die()) är

att .bind() kopplar händelserhanterare vid tidpunkt för exekvering av metoden
att .live() även kopplar händelsehanterare till element som läggs till efter exekvering av metoden.

Argument till metoder

När händelse skickas som argument till metoder (t.ex. .bind() och .live()) så skickas namn på händelse som sträng - en sträng som kan innehålla flera händelser separerade med mellanslag.

element.bind("click", ...);
element.bind("click doubleclick", ...);

Argumentet data kan innehålla anpassad data som man önskar bifoga till händelsehanterare medan argumentet handelseobjekt i händelsehanterare är ett fördefinierat händelseobjekt (event).

{ egenskap1: varde1, egenskap2: varde2 }

Argumentet handelselista är ett objekt med namngivna egenskaper ({egenskap: värde}) separerade med komma, om flera.

(Se även avsnittet Händelseobjekt (event) nedan för beskrivning av händelseobjekt.)

Metoder

Nedan beskrivs de övergripande metoderna för att koppla händelsehanterare till händelser. (Se avsnittet Genvägar till händelser nedan för metoder som kopplar till en viss händelse, d.v.s. något simplare. :-))

Metoder för att binda och koppla loss händelser
Händelse	Beskrivning
`.bind(handelse[, data], hanterare(handelseobjekt))` `.bind(handelse[, data], falskt)` `.bind(handelselista)`	Binder hanterare för händelse handelse, med ev. extra data
`.delegate(selektor, handelse, hanterare)` `.delegate(selektor, handelse, data, hanterare)` `.delegate(selektor, handelse)`	Binder hanterare för händelse till alla element
`.die()` `.die(handelse[, hanterare(handelseobjekt)])`	Kopplar loss hanterare för händelse handelse som bundits med .live()
`.live(handelse, hanterare)` `.live(handelse, data, hanterare)` `.live(handelseLista)`	Binder hanterare för händelse handelse
`.one(handelse, [data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen handelse, och kommer max att exekveras en gång
`.toggle(hanterare1(handelseobjekt), hanterare2(handelseobjekt)[, hanterare3(handelseobjekt)[, ...]])`	Binder hanterare för händelsen click, där händelsehanterare anropas i den ordning de skickats som argument
`.trigger(handelse, extraParamterar)` `.trigger(handelseobjekt)`	Utlöser händelse handelse eller händelse i handelseobjekt
`.triggerHandler(handelse, extraParamterar)`	Utlöser händelse handelse för första elementet
`.unbind([handelse][, hanterare(handelseobjekt)])` `.unbind(handelse, falskt)` `.unbind(handelseLista)`	Kopplar loss hanterare som kopplats med .bind(), och för ev. händelse handelse
`.undelegate(selektor, handelse)` `.undelegate(selektor, handelse, hanterare)` `.undelegate(selektor, handelseLista)` `.undelegate(namnutrymme)`	Binder hanterare för händelse handelse, med ev. extra data

I kod nedan kopplas en anonym funktion, med argumentet ev för händelseobjekt, till händelsen click för alla element av klassen "link".

$(".link").bind("click", function(ev) {
  //Kod att exekvera när element klickas på
});

Genvägar till händelser

Följande metoder är genvägar till anrop av metoden bind() med namn på händelse som argument.

Händelser utlöses genom att anropa de flesta metoderna nedan utan någon parameter.

Genvägar för att binda händelser
Händelse	Beskrivning
`.blur()` `.blur(hanterare(handelseobjekt))` `.blur([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen blur, d.v.s. när elementet förlorar fokus
`.change()` `.change(hanterare(handelseobjekt))` `.change([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen change
`.click()` `.click(hanterare(handelseobjekt))` `.click([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen click
`.dblclick()` `.dblclick(hanterare(handelseobjekt))` `.dblclick([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen dblclick
`.error(hanterare(handelseobjekt))` `.error([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen error
`.focus()` `.focus(hanterare(handelseobjekt))` `.focus([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen focus
`.focusin(hanterare(handelseobjekt))` `.focusin([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen focus när element eller någon av dess ättlingar får fokus
`.focusout(hanterare(handelseobjekt))` `.focusout([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen blur när element eller någon av dess ättlingar förlorar fokus
`.hover(hanterareIn(handelseobjekt), hanterareUt(handelseobjekt))` `.hover(hanterareInUt(handelseobjekt))`	Binder hanterare för händelsen hover, som är två händerer (in och ut)
`.keydown()` `.keydown(hanterare(handelseobjekt))` `.keydown([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen keydown
`.keypress()` `.keypress(hanterare(handelseobjekt))` `.keypress([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen keypress
`.keyup()` `.keyup(hanterare(handelseobjekt))` `.keyup([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen keyup
`.load(hanterare(handelseobjekt))` `.load([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen load (använd .ready() istället)
`.mouseup()` `.mouseup(hanterare(handelseobjekt))` `.mouseup([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mousedown
`.mouseenter()` `.mouseenter(hanterare(handelseobjekt))` `.mouseenter([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mouseenter
`.mouseleave()` `.mouseleave(hanterare(handelseobjekt))` `.mouseleave([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mouseleave
`.mousemove()` `.mousemove(hanterare(handelseobjekt))` `.mousemove([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mousemove
`.mouseout()` `.mouseout(hanterare(handelseobjekt))` `.mouseout([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mouseout
`.mouseover()` `.mouseover(hanterare(handelseobjekt))` `.mouseover([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mouseover
`.mouseup()` `.mouseup(hanterare(handelseobjekt))` `.mouseup([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen mouseup
`.resize()` `.resize(hanterare(handelseobjekt))` `.resize([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen resize
`.scroll()` `.scroll(hanterare(handelseobjekt))` `.scroll([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen scroll
`.select()` `.select(hanterare(handelseobjekt))` `.select([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen select
`.submit()` `.submit(hanterare(handelseobjekt))` `.submit([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen submit
`.unload(hanterare(handelseobjekt))` `.unload([data, ]hanterare(handelseobjekt))`	Binder hanterare för händelsen unload

I kod nedan kopplas en anonym funktion, men argumentet ev för händelseobjekt, till händelsen click för element med id "send".

$("#send").click(myFunction(ev) {
  //Kod att exekvera när element klickas på
});

Större exempel

Händelsen klick och händelsedata

Händelseobjekt (event)

Till en del händelsehanterare skickas ett händelseobjekt (event) med data om bl.a. händelse. Från detta objekt kan man bl.a. få position för muspekare och ev. anpassad data som skickats till händelsehanterare.

Åtkomst till egenskaper i tabell nedan fås genom parameter i händelsehanterares signatur. I exempel nedan kopplas hanterare till händelsen click och som argument skickas den anpassade parametern tal, som därmed kan refereras till med ev.data.tal.

$("a").bind("click", {tal: 12}, function(ev) {
  alert('Ditt tal ar: ' + ev.data.tal);
});

Nedan beskrivs egenskaper i händelseobjekt.

Egenskaper i händelseobjekt
Egenskap	Beskrivning
`.data`	eventuell data som skickades när händelsehanterare kopplades till händelse
`.metaKey`	om Ctrl-/Meta-tangent var nertryckta på tangentbord när händelse utlöstes
`.pageX`	position för musmarkör i X-led i förhållande till dokumentets övre vänstra hörn
`.pageY`	position för musmarkör i Y-led i förhållande till dokumentets övre vänstra hörn
`.relatedTarget`	eventuella andra element som ingår i händelse
`.result`	eventuellt resultat för händelse som angivits av annan händelsehanterare
`.target`	element som händelse utlösts för
`.timeStamp`	tidpunkt som händelse utlöstes, i antal sekunder sen 1970-01-01
`.type`	typ av händelse, t.ex. "click"
`.which`	eventuell tangent eller musknapp som genererade händelse, om relevant

Egenskapen .type kan användas för att avgöra vilken händelse som utlösts, vilket är praktiskt om man vill använda samma händelsehanterare för flera händelser.

Om händelse utlöstes m.h.a. klick på musen så kan man använda egenskapen .which för att avgöra om besökare klickade med vänster (1) eller höger (3) knapp.

Nedan beskrivs metoder i händelseobjekt.

Metoder i händelseobjekt
Metod	Beskrivning
`.isDefaultPrevented()`	returnerar sant om metoden preventDefault() anropats på händelseobjekt
`.isImmediatePropagationStopped()`	returnerar sant om metoden stopImmediatePropagation() anropats på händelseobjekt
`.isPropagationStopped()`	returnerar sant om metoden stopPropagation() anropats på händelseobjekt
`.preventDefault()`	förhindrar att elementets standardhändelse sker, t.ex. navigering vid klick på länk
`.stopImmediatePropagation()`	förhindrar att elementets eventuella övriga händelsehanterare exekveras
`.stopPropagation()`	förhindrar att händelse bubblar uppåt i DOM-hierarki, d.v.s. till förfäder

Till början på sida

Referenser

Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.

Events (jQuery-dokumentation).