Eventlyssnare

En av JavaScripts styrkor är förmågan att lyssna på event. Det innebär att vi kan fånga upp när användaren klickar på något, när ett element förändras eller när en tangent trycks ner på tangentbordet. Vi kommer inte gå ner på djupet, utan vi håller oss vid ytan och skaffar oss en känsla för vad vi kan åstadkomma.

Om du vill koda med kan du hämta sandboxen.

KeyboardEvent

Vi börjar med att kika på ett event från tangentbordet. Ett event kan triggas när man trycker ner en tangent, när man håller nere den eller när man släpper upp tangenten. Det som skiljer dem åt är hur de initieras.

keydown

js

document.addEventListener("keydown", function(event) {
  console.log(event)
})

Vi lägger eventlyssnaren direkt på document. Det skickas in två argument, eventnamnet "keydown" och en anonym funktion som körs automatiskt när eventet triggas. Argumentet event skickas med och innehåller hela eventet som triggas. För att enklare se vad som menas så kikar vi på hur det ser ut i consolen när vi skriver ut det:

Bild: Eventet 'KeyboardEvent' skrivs ut i consolen.

×

Vi kan se att det är typen KeyBoardEvent och en uppsättning egenskaper vi kan använda. Klickar man på den lilla pilen till vänster dyker det upp en hel del fler. Jag tryckte till exempel på “uppåt-pilen” på tangentbordet och kan då se egenskapen key med värdet ArrowUp. Tidigare har webbläsarna använt sig av ASCII-värden för att hantera de olika tangenterna. Numera kan vi, i alla fall i de vanligaste webbläsarna, använda oss utav den faktiska bokstaven eller tangenten.

Vi har alltså fångat eventet att en tangent trycks ner. All information hittar vi i event. Vi kikar på hur vi kan använda informationen:

let myContent = document.getElementById('content')

myContent.innerHTML = "<h3>Press a letter in the word 'dbwebb':</h3>"

document.addEventListener("keydown", function(event) {
    let key = event.key // Catch the key property

    switch (key) {
        case "d":
        case "b":
        case "w":
        case "e":
            myContent.innerHTML += `<br>Good job, you pressed ${key}`
            break
        default:
            myContent.innerHTML += `<br>You pressed: ${key}`
    }
})

Ovan används kontruktionen “switch statement” som i detta fallet kontrollerat variablen key och agerar efter värdet på den. Om man trycker på d, b, w eller e skrivs det ut “Good job…” i elementet. Den sista delen default är var man hamnar om man inte matchar något case.

Läs mer om switch statement.

Funktion som callback

Vi behöver inte skapa en anonym funktion direkt i eventlyssnaren utan vi kan använda en egen namngiven funktion.

javascript

function handleKey(event) {
  let key = event.key // Catch the key property

    switch (key) {
        case "d":
        case "b":
        case "w":
        case "e":
            myContent.innerHTML += `<br>Good job, you pressed ${key}`
            break
        default:
            myContent.innerHTML += `<br>You pressed: ${key}`
    }
}

document.addEventListener("keydown", handleKey)

Här skickar vi med funktionen direkt. Notera att vi inte exekverar funktionen utan det gör callbacken åt oss. Vi skickar även automatiskt med event.

Övriga keyboard-events

Det finns som sagt fler events att fånga upp från tangentbordet. Det skiljer inte så mycket, utan definiera rätt event som argument till eventlyssnaren:

document.addEventListener('keypress', ... )
document.addEventListener('keyup',  ... )

Läs mer om keyboard-events på MDN.

MouseEvent

Det finns en uppsjö events kopplade till musen med. Vi tar den vanligaste varianten och kikar på. Eventen fångas upp på liknande sätt som för tangentbordet.

click

Istället för att lägga klick-eventet på document kan vi lägga det så det triggas om vi klickar på ett speciellt ställe. Vi skapar några lådor att leka med.

html

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Lite css på den skapar fina, fyrkantiga lådor.

css

.box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: yellow;
}

Vi hämtar lådorna med javascript och lägger på en eventlyssnare, som triggas när man klickar i respektive låda.

javascript

let boxes = document.getElementsByClassName("box")

for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("click", function(event) {
    event.target.style.backgroundColor = "blue"
  })
}

Först och främst hämtar vi lådorna via klassnamnet. Vi loopar igenom lådorna och lägger på klick-eventet och använder konstruktionen event.target.style.backgroundColor för att byta bakgrundsfärg till blå. Med event.target når vi just det elementet vi klickat på och kan således använda samma eventlyssnare till alla lådor.

element.onclick()

Man kan även koppla en eventlyssnare direkt på ett element med element.onclick() på följande sätt:

js

for (let i = 0; i < boxes.length; i++) {
  boxes[i].onclick = function(event) {
    event.target.style.backgroundColor = "blue"
  }
}

En nackdel med detta sätt är att vi enbart kan ha ett klickevent på det elementet.

Läs mer om click events.