Download - JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Transcript
Page 1: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

JavaScript EventsPeter-Paul Koch (ppk)

http://quirksmode.orgKings of Code, 27 mei 2008

Hell is other browsers - Sartre

Page 2: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd
Page 3: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

http://quirksmode.org/dom/events/

Page 4: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Programma:

- de specificatie- mouseover en vriendjes- Apparaatonafhankelijkheid- de key events- het change event

Page 5: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

W3C Events specificatie

http://www.w3.org/TR/DOM-Level-3-Events/events.html

Page 6: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

W3C Events specificatie

besteedt niet altijd aandacht aan de werkelijkheid.

- keypress niet genoemd- focus/blur op window niet genoemd- change verkeerd gedefinieerd voor checkboxes en radios- click als activate niet genoemd

Page 7: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

W3C Events specificatie

- een event model dat lijkt op het echte model, maar niet helemaal- op dit moment deel van het probleem, niet van de oplossing- wellicht wordt het tijd voor een nieuwe versie die rekening houdt met de werkelijkheid

Page 8: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Mouseover

en vriendjes

Page 9: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Het mouseover event vuurt als de muis een element binnenkomt.

Het mouseout event vuurt als de muis een element verlaat.

Perfect ondersteund

Page 10: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Het mouseover event vuurt als de muis een element binnenkomt.

Het mouseout event vuurt als de muis een element verlaat.

Da's handig. Toch?

Jawel, maar.

Page 11: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht /><ul>

<li><a href=”#”>Multimedialize</a><ul>

<li><a href=”#”>Sound</a></li><li><a href=”#”>Java applets</a></li>

</ul></li><li><a href=”#”>Ajaxify</a>

<ul><li><a href=”#”>Web 2.0</a></li><li><a href=”#”>Web 3.0</a></li><li><a href=”#”>Web 4.0b</a></li>

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

Page 12: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Page 13: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Page 14: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Event bubbling heeft z'n voordelen.

var dropdown = {init: function (dropdown) {

var x = dropdown.getElementsByTagName('a');for (var i=0;i<x.length;i++) {

x[i].onmouseover = mouseOver;x[i].onmouseout = mouseOut;

}}

}

Page 15: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Event bubbling heeft z'n voordelen.

var dropdown = {init: function (dropdown) {

var x = dropdown.getElementsByTagName('a');for (var i=0;i<x.length;i++) {

x[i].onmouseover = mouseOver;x[i].onmouseout = mouseOut;

}}

}

Page 16: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Event bubbling heeft z'n voordelen.

var dropdown = {init: function (dropdown) {

}}

Doen we niet meer. In plaats daarvan gebruiken we event delegation.

Page 17: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = mouseOver;dropdown.onmouseout = mouseOut;

}}

Het event bubbelt toch wel naar de <ul> toe.

Waarom handelen we het daar dan niet af?

Scheelt een boel event handlers.

Page 18: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = mouseOver;dropdown.onmouseout = mouseOut;

}}

Werkt in alle browsers.

Page 19: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Elluk foordeel hep se nadeel- oude Ajax God

Elke mouseover of mouseout, op welk element het ook plaatsvindt, bubbelt naar boven.

Page 20: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Page 21: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

a.mouseovera.mouseout en a.mouseovera.mouseout en a.mouseovera.mouseout

Leuk! Event bubbling werkt. En event delegation ook.

Page 22: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

a.mouseovera.mouseout en a.mouseovera.mouseout en a.mouseovera.mouseout

Maar is die muis nou eindelijk het submenu al eens uit of niet?

Page 23: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}

Page 24: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}Ontwikkelingstijd: ca. 10 minuten

Page 25: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}Ontwikkelingstijd: ca. 2 dagen

Page 26: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

De oplossing ...

mouseenter en mouseleave

Hetzelfde als mouseover en mouseout, maar bubbelen niet.

Page 27: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Page 28: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

li.mouseleave...dat is alles

Nadeel: event delegation werktniet.

Page 29: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />var dropdown = {

init: function (dropdown) {var x = dropdown.getElementsByTagName('li');for (var i=0;i<x.length;i++) {

x[i].onmouseenter = this.mouseOver;x[i].onmouseleave = this.mouseOut;

}},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}

Page 30: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />var dropdown = {

init: function (dropdown) {var x = dropdown.getElementsByTagName('li');for (var i=0;i<x.length;i++) {

x[i].onmouseenter = this.mouseOver;x[i].onmouseleave = this.mouseOut;

}},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}

Page 31: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

mouseenter en mouseleave

Een ideetje van Microsoft.Dus willen de anderen niet meedoen.

Page 32: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

mouseenter en mouseleave

Het is de schuld van Firefox, Safari en Opera dat we nog steeds dagen moeten verspillen aan dropdown menus.

Page 33: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}

Page 34: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

},mouseOut: function (e) {

if (this mouseout is important) {this.closeSubMenu();

}}

}

Page 35: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Hoe werkt het nou?

onmouseout, vind uit naar welk element de muis toe gaat.

Is dat element geen deel van het submenu, klap het submenu dan in.

Page 36: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Hoe werkt het nou?

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 37: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Vind het element waar de muis naar toe gaat.

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 38: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Vind het element waar de muis naar toe gaat.

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 39: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Vind het element waar de muis naar toe gaat.

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 40: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Kijk of het submenu dit element bevat.

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 41: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Kijk of het submenu dit element bevat.

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Page 42: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

mouseOut: function (e) {e = e || window.event;var el = e.relatedTarget || e.toElement;if (!submenu.contains(el)) {

this.closeSubMenu();}

}

Dan zijn we er. Toch?

<grin type=”evil” />

Page 43: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

Nee!

Stel dat iemand helemaal geen muis gebruikt,

maar alleen het toetsenbord

hoe klapt het menu dan uit?

Page 44: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Apparaatonafhankelijkheid

Page 45: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

}}

Page 46: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

}}

Werkt niet zonder muis.

Page 47: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

}}

We willen events die vertellen of de gebruiker een link “binnenkomt” of “verlaat”focus en blur

Page 48: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = dropdown.onfocus = this.mouseOver;

dropdown.onmouseout = dropdown.onblur = this.mouseOut;

}}

Page 49: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = dropdown.onfocus = this.mouseOver;

dropdown.onmouseout = dropdown.onblur = this.mouseOut;

}}

Werkt niet.

Page 50: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = dropdown.onfocus = this.mouseOver;

dropdown.onmouseout = dropdown.onblur = this.mouseOut;

}}

Focus en blur bubbelen niet.

Page 51: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Bubbelen of niet bubbelen

Twee soorten events:1) Muis- en toetsevents2) Interface events

Page 52: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Bubbelen of niet bubbelen

Twee soorten events:1) Muis- en toetsevents2) Interface events

Stellen vast dat de gebruiker een bepaalde actie heeft ondernomen.Vb: mouseover, mouseout, click, keydown, keypress

Page 53: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Bubbelen of niet bubbelen

Twee soorten events:1) Muis- en toetsevents2) Interface events

Bubbelen wel (over het algemeen)

Page 54: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Bubbelen of niet bubbelen

Twee soorten events:1) Muis- en toetsevents2) Interface events

Stellen vast dat een zekere gebeurtenis plaatsvindt; ongeacht hoe die gebeurtenis precies werd geïnitieerd.Vb: load, change, submit, focus, blur

Page 55: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Bubbelen of niet bubbelen

Twee soorten events:1) Muis- en toetsevents2) Interface events

Bubbelen niet (over het algemeen)

Page 56: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;

}}

Page 57: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;var x = dropdown.getElementsByTagName('li');for (var i=0;i<x.length;i++) {

x[i].onfocus = this.mouseOver;x[i].onblur = this.mouseOut;

}}

}

Page 58: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;var x = dropdown.getElementsByTagName('li');for (var i=0;i<x.length;i++) {

x[i].onfocus = this.mouseOver;x[i].onblur = this.mouseOut;

}}

}Werkt niet.

Page 59: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

De HTML elementen moeten de toetsenbord-focus kunnen ontvangen.

- links- formuliervelden

Page 60: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

De HTML elementen moeten de toetsenbord-focus kunnen ontvangen.

- links- formuliervelden- elementen met tabindex

Page 61: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;var x = dropdown.getElementsByTagName('li');for (var i=0;i<x.length;i++) {

x[i].onfocus = this.mouseOver;x[i].onblur = this.mouseOut;

}}

}

Page 62: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;var x = dropdown.getElementsByTagName('a');for (var i=0;i<x.length;i++) {

x[i].onfocus = this.mouseOver;x[i].onblur = this.mouseOut;

}}

}

Page 63: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Dropdown menu <zucht />

var dropdown = {init: function (dropdown) {

dropdown.onmouseover = this.mouseOver;dropdown.onmouseout = this.mouseOut;var x = dropdown.getElementsByTagName('a');for (var i=0;i<x.length;i++) {

x[i].onfocus = this.mouseOver;x[i].onblur = this.mouseOut;

}}

}

Page 64: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

En hoe zit het met click?

Je hebt geluk: click vuurt ook af als de gebruiker een element activeert met het toetsenbord.

Restrictie: het element moet de toetsenbord-focus kunnen ontvangen

Page 65: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

De key events

Page 66: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypress

keyup

Page 67: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypressAls een toets die een karakter

invoegt, wordt ingedrukt.Blijft vuren.

keyup

Page 68: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypressAls een toets die een karakter

invoegt, wordt ingedrukt.Blijft vuren.

keyupAls een toets wordt losgelaten.

Page 69: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydown en keypress

Page 70: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

alleen keydown

Page 71: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypressAls een toets die een karakter

invoegt, wordt ingedrukt.Blijft vuren.

Page 72: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypressAls een toets die een karakter

invoegt, wordt ingedrukt.Blijft vuren.

Deze theorie komt oorsponkelijk van Microsoft.

Recentelijk heeft Safari hem overgenomen.

Het is de enige theorie; Firefox en Opera vuren maar wat raak.

En W3C noemt keypress niet eens.

Page 73: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

keydownAls een toets wordt ingedrukt. Blijft vuren.

keypressAls een toets die een karakter

invoegt, wordt ingedrukt.Blijft vuren.

Page 74: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Twee properties: keyCode en charCode

Twee stukjes data: - de code van de ingedrukte toets- de code van het karakter

Page 75: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Maar het is natuurlijk niet zo dat de ene property het ene stukje data bevat, en de andere het andere.

Dat zou namelijk veel te simpel zijn.

Page 76: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Twee properties: keyCode en charCode

Wat zegt W3C?

Page 77: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Twee properties: keyCode en charCodekeyIdentifier

Wat zegt W3C?

Page 78: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

keyCode

- Bevat de toetscode onkeydown- Bevat de ASCII waarde onkeypress

Page 79: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

charCode

- Bevat 0 onkeydown- Bevat de ASCII waarde onkeypress

Page 80: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

keyIdentifier

- Bevat een naam als “Shift” of een code als “U+000041” (hexadecimaal 65) voor “a”

Page 81: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Als je de echte toets wilt weten:

el.onkeydown = function (e) {e = e || window.event;var realKey = e.keyCode;

}

Page 82: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Als je de echte toets wilt weten:

el.onkeydown = function (e) {e = e || window.event;var realKey = e.keyCode;

}

Page 83: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Als je het karakter wilt vinden:

el.onkeypress = function (e) {e = e || window.event;var char = e.keyCode || e.charCode;

}

Page 84: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Welke toets heeft mijn gebruiker ingedrukt?

Als je het karakter wilt vinden:

el.onkeypress = function (e) {e = e || window.event;var char = e.keyCode || e.charCode;

}

Page 85: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Hoe kan ik de default actie voorkomen?

el.onkeydown = function (e) {e = e || window.event;var key = e.keyCode;if (key is incorrect) {

// cancel default action}

}

Page 86: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Hoe kan ik de default actie voorkomen?

el.onkeydown = function (e) {e = e || window.event;var key = e.keyCode;if (key is incorrect) {

// cancel default action}

}

Page 87: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd
Page 88: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

change

Page 89: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Het change event vuurt als er een wijziging wordt aangebracht in een formulierveld.

Het zou zo'n handig event kunnen zijn: het vuurt alleen als de gebruiker daadwerkelijk iets verandertin plaats van elke keer als hij ergens op klikt of focust.

Page 90: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Page 91: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

focus

blur

Geen change event. De inhoud is niet gewijzigd.

Page 92: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

focus

blur

Wel een change event. De inhoud is gewijzigd.

Page 93: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Muis:

Click op select

Page 94: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Muis:

Click op nieuwe optieCHANGE

Page 95: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Toetsenbord:

focus

Focus op select

Page 96: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Toetsenbord:

focus pijltje

Pijltjes om naar andere optie te gaanCHANGE

Page 97: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Pijltjes om naar andere optie te gaanCHANGE

Dit is een BUG!

Page 98: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Toetsenbord:

focus pijltje

Pijltjes om naar andere optie te gaan

Page 99: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Toetsenbord:

focus pijltje blur

Blur select box.CHANGE

Page 100: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

click

CHANGE zodra de checked property verandert.

Page 101: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

click

...

Page 102: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

click blur

CHANGE zodra het element geblurd wordt.

Page 103: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

CHANGE zodra het element geblurd wordt.

Dit is een BUG!

Page 104: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios

Page 105: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios- reset

Als een formulier gereset wordt, kunnen er ook waardes van velden veranderen.

Page 106: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

- tekstvelden- select boxes- checkboxes en radios- reset

Wie vuurt er dan een change event?Alleen Konqueror, en alleen op checkboxes.

Page 107: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Nog zoiets:

Het select event vuurt als de gebruiker tekst in een tekstveld selecteert.

Logischerwijs zou je verwachten dat hetzelfde gebeurt als de gebruiker tekst in een paragraaf selecteert.

Maar nee.

Page 108: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

http://quirksmode.org/dom/events/

Page 109: JavaScript Events - Quirks Mode...W3C Events specificatie besteedt niet altijd aandacht aan de werkelijkheid. - keypress niet genoemd - focus/blur op window niet genoemd - change verkeerd

Vragen?