KAJ 04

DOM, události

Vybrané partie DOM API

• Funkce, konstanty a objekty pro manipulaci se stránkou
• Zpravidla dostupné pomocí (globální) proměnné document
• John Resig: The DOM is a mess

DOM: úpravy podstromu

let p = document.querySelector("p")
// HTML parser, pozor na XSS!
p.innerHTML = "<strong>toto je test</strong>"
// jen text
p.textContent = "<strong>toto je test</strong>"

DOM: tvorba nových prvků

let p = document.querySelector("p")
let strong = document.createElement("strong")
p.appendChild(strong)
let text = document.createTextNode("toto je test")
p.appendChild(text)
let input = document.createElement("input")
input.type = "number"
input.id = "foo"

Metody createTextNode, appendChild (a jejich sourozenci) dnes patří spíš do muzea.

DOM: "nové" rozhraní ParentNode

...i DOM prochází průběžnou modernizací.

let p = document.querySelector("p")
let strong = document.createElement("strong")
p.append("AAA", strong, "BBB")
p.prepend(strong, "test")
console.log(p.children) // pouze značky, nikoliv text

DOM: "nové" rozhraní ChildNode

let p1 = document.querySelector("p")
p1.remove()
let p2 = document.querySelector("p")
p2.replaceWith(p1, "test")
p2.before("AAA", "BBB", p3)
p2.after("AAA", "BBB", p3)

DOM: práce s atributem class

let p = document.querySelector("p")
p.className = "class1"
p.classList.add("class2")
p.classList.remove("class3")
p.classList.contains("class2") // true
p.classList.toggle("class4")
p.classList.toggle("class4", x > 15)

Události: opáčko

• Alternativní způsob řízení toku programu
• Event-based programming
• Až nastane X, udělej Y

Události: opáčko

let func = function(e) {
  alert("...")
}
document.body.addEventListener("click", func, false)

Události: opáčko

Co je na událostech zajímavého?

• Na jakých vznikají prvcích?
• Jaké existují?
• Co obsahuje (jediný) parametr posluchače?
• Jaký význam má třetí parametr addEventListener?

Události: objekt události

• Liší se podle typu události
• Vždy obsahuje target (místo události), currentTarget (místo posluchače), timeStamp, type
• Vždy obsahuje stopPropagation a preventDefault

Události klávesnice

• keydown, keypress, keyup
• Modifikátory ctrlKey, altKey, shiftKey, metaKey
• Vlastnost key
  • Identifikátor stisklé logické klávesy (string)
  • Seznam na https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
• Vlastnost code
  • Identifikátor stisklé fyzické (hardwarové) klávesy
  • Stejná množina hodnot jako u key

Události klávesnice

Staré, zpětně kompatibilní API

• Stisk a uvolnění obsahuje keyCode
  • Identifikátor klávesy na klávesnici (int)
  • Seznam na https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
• Tištitelný keypress obsahuje charCode
  • Unicode code point znaku (int)
  • String.fromCharCode převede na znak

Události myši

• mousedown, mouseup, click, mouseover, mouseout, mousemove
• clientX a clientY – souřadnice kurzoru vůči průhledu
• button je tlačítko (0 = levé, 1 = prostřední, 2 = pravé)

Události dotykové

• touchstart, touchmove, touchend, (gesturechange)
• touches – pole všech dotyků
• changedTouches – pole změněných dotyků
• targetTouches – pole dotyků na cílovém prvku
• Dotyk je mini-událost, obsahující pozici a doplňkové údaje (sílu stisku, velikost prstu a natočení)

Pointer events

Hybrid mezi mouse a touch. Společné pro myš, dotyk, stylus…

• pointerdown, pointermove, pointerup
• pointerenter, pointerleave
• žádný click
• element.setPointCapture(), element.releasePointCapture()
• komplementární CSS vlastnost pointer-events

Události ostatní

• focus, blur
• input, change, submit
• scroll, resize
• DOMContentLoaded
• Kompletní soupis

Capture a bubble #1

• Třetí parametr pro addEventListener je useCapture, nebo konfigurační objekt (viz dále)
• Posluchače události jsou volány nejprve ve fázi capture, poté ve fázi bubble
• Pořadí fází a volání viz diagram

Capture a bubble #2

• Více posluchačů na stejném uzlu (ve stejné fázi) je voláno v definovaném pořadí
• Zpracovávání události (mezi uzly) lze zastavit voláním stopPropagation()
• Zpracovávání události (v rámci uzlu) lze zastavit voláním stopImmediatePropagation()
• Metoda preventDefault() s tím nijak nesouvisí

Capture a bubble #3

• Některé události nebublají…
• …ale i tyto procházejí capture
• load, unload
• focus, blur

Konfigurační objekt

Třetí parametr může být též objekt s vlastnostmi:

• once
• capture
• passive: slib, že posluchač nezavolá preventDefault()
• signal: instance funkce AbortSignal, použitelná k odebrání posluchače

Odebrání posluchače pomocí AbortSignal

...není zásadně užitečné, ale bude se hodit příště.

let controller = new AbortController()
node.addEventListener("click", f, {signal: controller.signal})
/* ... */
controller.abort()  // odebrani posluchace

Posluchače událostí

Varianta 1: posluchač je funkce

window.addEventListener("load", function(e) {
  alert(e.currentTarget == this)
});

• this je prvek, na kterém je posluchač zavěšen (nikoliv ten, kde událost vznikla)
• Pokud chceme předat parametry nebo změnit this, použijeme uzávěru / arrow function / bind

Posluchače událostí

Varianta 2: posluchač je objekt

let obj = {
  handleEvent(e) {
    alert(this == obj)
  }
}
window.addEventListener("load", obj)

• obj musí mít metodu handleEvent
• this je posluchač

data-* atributy

• Jazyk HTML dovoluje přidávání vlastních nestandardních atributů ve tvaru data-něco
• Často praktičtější alternativa k přeužívanému class
• Pro práci s nimi existuje dedikované API dataset

<li data-order-status="shipped">...</li>

let li = document.querySelector("li")
console.log(li.dataset.orderStatus)  // "shipped"

Delegování událostí

• Problém: při výpisu mnoha položek musíme přidávat mnoho posluchačů
• Nápad: většina událostí bublá, takže by měl stačit posluchač na společném rodiči

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

let ul = document.querySelector("ul")
ul.addEventListener("click", e => {
  console.log("kliknuto na", ...)  // ???
})

Delegování událostí

AKA Event Delegation

<ul>
  <li data-product-id="42">...</li>
</ul>

ul.addEventListener("click", e => {
  let li = e.target.closest("[data-product-id]")
  let productId = li.dataset.productId
  console.log("kliknuto na", productId)
})

Delegování událostí

AKA Event Delegation

<ul>
  <li data-product-id="42">
    <button name="confirm">...</button>
    <button name="delete">...</button>
  </li>
</ul>

ul.addEventListener("click", e => {
  let button = e.target.closest("button[name]")
  if (!button) { return }
  let li = button.closest("[data-product-id]")
  console.log(button.name, li.dataset.productId)
})

Prostor pro otázky

?