Logika na straněklienta, skriptovací jazyky

odstavec.innerHTML = "Generováno <em>skriptem</em>";

var obrazek = document.createElement("img");
obrazek.src = "...";

odstavec.appendChild(obrazek);

Javascript 

– pokročilé programování

Vytváření objektů

Prototypy a dědičnost

Události

– Event Handler
– Event Objekt
– Probublávání
– Ošetřování chyb

UD

ÁLOSTI 

Ud

álosti v javascriptu

Implicitní definice Event-handleru

Explicitní definice Event-handleru

Objekt event

Životní cyklus události

Probublávání události

Události

Události jsou generovány v uživatelském rozhraní

Máme možnost je odchytnout a napojit na nějaký 
vlastní kód

Část programu, která ošetřuje události se nazývá 
Event-Handler

Ošetření událostí

Některé události mají přiřazené implicitní akce

Tyto akce jsou volány, pokud neřekneme jinak

Příklad:

– click na odkazu způsobí přechod na jinou stránku
– click na tlačítko submit způsobí odeslání formuláře

Jestliže definujeme vlastní akci, je pořadí vykonání 

1.

vlastní definované akce

2.

implicitní akce

Registrace Event-

handlerů podle 

standardu W3C

Registruj

í se oba

Poslední argument určuje, zda se událost má 
odchytit ve fázi capture nebo bubble 
(false=bubble)

Odstranění Event-handleru

element.addEventListener('click',

doSomething, false);

element.addEventListener('click',

doSomethingElse, false);

element.removeEventListener('click', doSomethingElse, false)

Způsoby zachytávání událostí

Otázka: jestliže mám vnořený element který 
odchytává stejnou událost jako jeho nadřazený 
element, kdo to má odchytit první?

Event Capture

1.

document

2.

div 1

3.

div 2

Event Bubbling

div 2

div 1

document

document

div 1

div 2

document

div 1

div 2

Netscape

Microsoft

Propagovaní události – W3C

Kombinace capture a bubble propagace

Nejprve capture (c), pak zpětné bubble (b)

document

div 1

div 2

c 1

c 2

b 1

b 2

kuk: capture.htm

Události - příklad

var p = document.querySelector("p");

var posluchac = function() {

alert("kliknuto");

}

p.addEventListener("click", posluchac); // 

předáno odkazem

/* ... */

p.removeEventListener("click", posluchac);

Event objekt

document.body.addEventListener("click", 
function(e) {

alert(e.type);     // "click"