Fyrirlestur – Atburðir

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Forrit sem bregðast við atburðum

Þegar við skrifum flóknari forrit tökum við yfirleitt við skipunum eða gögnum frá notendum
Hvernig getur forritið okkar vitað þegar slegið er á takka eða ýtt á músarhnapp?

Notum atburði (events) til að bregðast við hlutum sem gerast á einhverjum tímapunkti í framtíðinni
Atburðir gerast ósamstillt—eru async!

Atburðir – events

Getum fylgst með atburðum…
- sem vafrinn veldur
- sem notandi veldur
Skráum þáttöku með addEventListener falli á nóðum

window.addEventListener('click', () => {
  console.log('You knocked?');
});

Taka þátt í atburðum

Skráum að við viljum meðhöndla vissa tegund af atburð á ákveðnum nóðum
Þegar atburður gerist eru allir þeir sem skráð sig hafa látnir vita í (flestum tilfellum) FIFO (first–in, first–out) röð
Aðeins ein meðhöndlun á sér stað í einu

Skrá meðhöndlun

Skráum meðhöndlun á nóðu með fallinu element.addEventListener(name, listener)
- name er nafn á atburð
- listener er fall sem keyrir við atburð

Afskráum meðhöndlun með element.removeEventListener(name, listener)
- Þurfum að vita hvaða fall á að fjarlægja

Ef við skráum nefnd föll eða breytur sem innihalda fall sem gildi megum við ekki keyra fallið þegar við bætum því við
- element.addEventListener('click', fn)
- Ekki element.addEventListener('click', fn())

<button>Click me</button>

const button =
  document.querySelector('button');
button.addEventListener('click', () => {
  console.log('Button clicked.');
});
button.addEventListener('click', () => {
  console.log('You knocked?');
});

// smellt á takka
// "Button clicked."
// "You knocked?"

<button>Click me</button>

const button =
  document.querySelector('button');

function once() {
  console.log('Þetta keyrir einu sinni.');
  button.removeEventListener('click', once);
}
button.addEventListener('click', once);

Dæmi

Upplýsingar um atburð

Fáum hlut—Event—með upplýsingum um atburð sem argument í fall
- Oftast kallað e eða event
Upplýsingar eru t.d. um hvaða lykil var slegið á lyklaborð, eða hvaða takka á mús

Atburðir fljóta upp

Atburðir fljóta upp DOM tréð og byrja á innsta elementi sem tekur við atburð
Ef smellt á takka innan <div> sem bæði hafa click handler fær takki fyrst að keyra, síðan <div>

target á Event hlut segir til um hvert innsta elementið var
stopPropagation() á Event hlut stoppar að atburður fljóti upp

Sjálfgefin hegðun

Sumir atburðir valda sjálfgefinni hegðun
- <a href> mun senda okkur þangað sem href bendir
- Að ýta á niður ör mun skruna síðu niður
preventDefault() á Event hlut stoppar sjálfgefna hegðun

Lyklaborð

Þegar við smellum á lyklaborð fáum við upplýsingar um hvaða lykil var slegið á með keyup eða keydown
- e.keyCode segir til um kóða fyrir staf, t.d. 65 fyrir a (sama fyrir stóra A!)
- e.key segir til um stafinn, þá a eða A

Ekki ráðlagt að nota til að komast að því hvaða texti var sleginn inn, aðeins á hvaða takka var slegið
Notum input eða change event á <input>, <select> eða <textarea> - input keyrir við hverja breytingu, t.d. slegið á takka
- change þegar búið að breyta gildi, t.d. eftir að slegið á tab eða enter

Dæmi um upplýsingahlut

Aðrir atburðir

scroll atburður á sér stað þegar element er skrollað
- scroll á window heldur utanum skroll á síðu
mousemove atburður á sér stað ef músinn er hreyfð
- Getum útfært drag’n’drop með því

touchstart, touchmove og touchend atburðir gerast þegar vefurinn er snertur
Og fleiri viðburðir…

Hvenær keyrir JavaScript?

Þar sem JavaScript er keyrt um leið og þáttun líkur getur verið að DOM sé ekki tilbúið
Getum fest okkur á atburð sem segir okkur til um að DOM sé tilbúið
- document.addEventListener( 'DOMContentLoaded', fn);
Skiptir ekki máli þá hvort <script> sé neðst í <body>

Önnur leið er að fylgjast með breytingum á document.readyState
Getur verið loading, interactive (getum átt við DOM), eða complete (öll þáttun átt sér stað)

document.addEventListener('readystatechange', (event) => {
  // okkur er sama um eventinn sjálfan
  console.log(document.readyState);
});

Dæmi um skrun

Dæmi um DOMLoaded

Debouncing

Stundum viljum við gera eitthvað við atburð sem gerist mjög oft
- Við hreyfingu á mús
- Skrif á lyklaborð
- Við skroll á síðu
Óþarfi að gera fyrir hvert tilvik atburðar, nóg að gera eftir eða á ákveðnum fresti, debouncum atburðinn

const textarea =
  document.querySelector('textarea');

let timeout;

textarea.addEventListener('keydown', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    console.log('You stopped typing.');
  }, 500);
});

setTimeout og setInterval

Leiðir í JavaScript til að búa til föll sem keyra í framtíðinni
setTimeout(callback, delay) kallar í callback fallið eftir delay millisekúndur
setInterval(callback, interval) kallar í callback á interval millisekúndu fresti

Bæði setTimeout og setInterval skila tölu sem er auðkenni teljara sem var búinn til
Getum slökkt á teljar með clearTimeout eða clearInterval sem tekur auðkenni sem argument

Dæmi um debounce

Dæmi um setTimeout og setInterval

DOM og form

Við vinnum mikið með <form> í vefforritun, oft viljum við gera eitthvað í staðinn fyrir að senda þau
FormData API leyfir okkur að fá öll gögn úr formi í hlut til að vinna með
Notum submit event á forminu sjálfu til að taka málin í okkar hendur með preventDefault()

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const data = new FormData(form);
});

input og textarea

Hægt að eiga við input og textarea reiti með því að nota focus og blur atburði
Getum átt við textann sjálfan með selection API
Ef við viljum bregðast við því að eitthvað sé átt við textareiti er best að nota input atburð í staðinn fyrir mouseup eða álíka

checkbox, radio og select

Getum fylgst með breytingum á checkbox, radio og select með change atburðinum
checkbox hafa checked eigindi sem segja til um stöðu þeirra

radio hefur value sem gefur hvaða gildi sú breyta sem skilgreind er með name attribute hefur
select hefur value sem segir til um hvað er valið, en getur þó orðið flóknara

Dæmi