JAVASCRIPT Händelser
Exempel på händelser
- känner av när webbsidan är färdigladdad
- skicka iväg formulärdata (submit)
- musklick på en knapp
- fokus på ett textfält i ett formulär
- reagera när musen förs över något
- tangenttryckning
load och unload
Händelsen "load" har vi träffat på tidigare, den reagerar när ett element på sidan eller hela dokumentet eller fönstret laddat klart. Händelsen "unload" aktiveras när vi stänger en webbsida.
click
Känner av när vi klickar med musen på något objekt, oftast en knapp.
submit
Känner av när vi klickar på en submit-knapp i ett formulär och kan anropa en funktion för att testa att formuläret är korrekt ifyllt. Detta går att lösa även med en vanlig knapp och "click" också.
focus, blur och change
Vi har inte använt dessa men vi har satt fokus på ett textfält med metoden "focus()". Med händelsen "focus" så kan vi känna av när ett objekt(gäller vissa objekt) får fokus, "blur" är tvärtom när ett objekt(formulärobjekt) tappar fokus och "change" när ett formulärobjekts(input, select, textarea) innehåll förändras.
mouseover, mouseout
Reagerar när vi för musen över ett objekt, en bild, ett "hotspot"-område eller liknande samt när vi tar bort musen från objektet.
keydown, keypress och keyup
Reagerar när vi trycker ner (keydown) och håller nere tangenten (keypress) och när vi släpper upp tangenten (keyup).
Massor av händelser i och med HTML5
En lista på alla dessa nya händelser finns hos w3schools.
Koppla en händelse till ett element på sidan och kod som ska utföras
3 delar måste kopplas ihop
elementet på webbsidan, händelsen, funktionen som ska anropas
OBS! Inga parentser efter funktionsnamnet.
På det bästa sättet, som lanserades med DOM nivå 2, ca år 2000 (fördelen med detta sätt är att en händelse kan starta flera funktioner):
document.getElementById('lager').addEventListener('mouseover', moveLayer);
document.getElementById('lager').addEventListener('click', hit);
OBS! Vi hakar på load-händelsen till fönstret("window").
På traditionellt sätt, w3schools kör detta fortfarande:
document.getElementById('lager').onmouseover=moveLayer;
document.getElementById('lager').onclick=hit;
Vi använder INTE detta sätt, men för att ni ska se likheterna och kunna förstå vad det är när ni hittar det på internet så visas detta.
Normalt fortfarande backup för den promillen av alla surfare som använder IE8.
Plocka ut information ur händelsen
När en händelse inträffar och lyssnaren skickar vidare informationen
så bifogas automatiskt information om vilket element som själva händelsen inträffade på eller om det var en tangenthändelse så bifogas information om vilken tangent som tryckts ner. Därför behöver inte denna information bifogas till någon funktion men om funktionen vill utnyttja denna information måste man skriva den med en parameter (oftast e som står event) som tar emot händelseinformationen och som man sen kan plocka ut delar ur.
document.addEventListener('keydown', myKeyMover) ;
function myKeyMover(e)
{
doSomething();
var x=e.keyCode;
if (x==38) moveUp();
else if (x==40) moveDown();
/*alert("Keycode: " + x);*/
}
Skicka med information som argument till en funktion
Observera att när vi kopplar händelsen till en funktion så kan vi inte skriva,
document.getElementById('one').addEventListener('click', myPrinter(1) );,
för vi får bara skriva funktionsnamnet i det här läget.
MEN vi kan skapa en anonym funktion som utför ett anrop av en funktion med ett argument i detta fall,
document.getElementById('one').addEventListener('click', function(){ myPrinter(1); });
eller
document.getElementById('two').addEventListener('click', function(){ myPrinter(2); });
document.getElementById('one').addEventListener('click', function(){ myPrinter(1); });
document.getElementById('two').addEventListener('click', function(){ myPrinter(2); });
function myPrinter(nr)
{
document.getElementById('ruta').innerHTML=nr;
}
Exempel
Hit me
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hit me</title>
<link href="hitme.css" rel="stylesheet">
</head>
<body>
<div id="lager">
<img src="hitme.gif" alt="hitme-bild">
</div>
<script src="hitme.js"></script>
</body>
</html>@charset "utf-8";
/* CSS Document */
#lager
{
position: absolute;
visibility: visible;
top: 0px;
left: 0px;
width:100px;
height:100px;
background-color: red;
}
img {
width:100px;
height:100px;
}
// JavaScript Document
window.addEventListener('load', moveLayer);
document.getElementById('lager').addEventListener('mouseover', moveLayer);
document.getElementById('lager').addEventListener('click', hit);
function moveLayer()
{
var nyX = Math.round(Math.random()*800); // ett tal mellan 0 och 800
var nyY = Math.round(Math.random()*600); // ett tal mellan 0 och 600
var y=nyY+"px";
var x=nyX+"px";;
document.getElementById('lager').style.top = y;
document.getElementById('lager').style.left = x;
}
function hit() {
alert('Du vann!');
}
style har många egenskaper som går att sätta, se denna lista
Scrolla text
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>scroll layer</title>
<style type="text/css">
#content
{
position: absolute;
visibility: visible;
width: 450px;
height: 350px;
top: 0px;
left: 150px;
background-color: red;
}
p {
margin-top: 0.5em;
margin-left: 0.5em;
font-family: "Courier New";
font-size: 16pt;
color: white;
}
</style>
</head>
<body>
<div id="content">
<p>
Den här effekten har du alldeles säkert stött på om du surfar
mycket. Det finns kanske inga uppenbara fördelar med den - förutom
att allt övrigt på sidan ligger helt stilla och att det ger
sidan någorlunda proffsig känsla. Eller?<br /><br />
Zzzzzzzzzzzzz............ <br />
Upp och ner pil fungerar också men buggar lite :-)
</p>
</div>
<button type="button" id="btnUpp">upp</button>
<br><br><br><br><br><br><br>
<button type="button" id="btnNer">ner</button>
<br><br><br><br><br>
<button type="button" id="btnAterstall">Återställ</button>
<script>
document.getElementById('btnUpp').addEventListener('mouseover', moveUp);
document.getElementById('btnUpp').addEventListener('mouseout', myStop);
document.getElementById('btnNer').addEventListener('mouseover', moveDown);
document.getElementById('btnNer').addEventListener('mouseout', myStop);
document.getElementById('btnAterstall').addEventListener('click', aterStall);
document.addEventListener('keydown', myKeyMover);
var y = 0;
var t;
function myStop()
{
clearTimeout(t);
}
function aterStall()
{
y=0;
document.getElementById("content").style.top=y+"px";
}
function moveDown()
{
y +=10;
document.getElementById("content").style.top = y+"px";
t = setTimeout(moveDown, 50);
}
function moveUp()
{
y -=10;
document.getElementById("content").style.top = y+"px";
t = setTimeout(moveUp, 50);
}
function myKeyMover(e)
{
myStop();
var x=e.keyCode;
if (x==38) moveUp();
else if (x==40) moveDown();
/*console.log("Keycode: " + x);*/
}
</script>
</body>
</html>
En lista på händelser finns hos w3schools.
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
JAVASCRIPT & JQUERY , Jon Duckett (Wiley 2014)