![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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/2.jpg)
![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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/32.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/33.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/34.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/35.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/36.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/37.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/38.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/39.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/40.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/41.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/42.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/43.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/44.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/45.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/46.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/47.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/48.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/49.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/50.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/51.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/52.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/53.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/54.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/55.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/56.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/57.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/58.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/59.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/60.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/61.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/62.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/63.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/64.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/65.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/66.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/67.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/68.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/69.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/70.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/71.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/72.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/73.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/74.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/75.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/76.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/77.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/78.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/79.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/80.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/81.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/82.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/83.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/84.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/85.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/86.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/87.jpg)
![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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/88.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/89.jpg)
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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/90.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/91.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/92.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/93.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/94.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/95.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/96.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/97.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/98.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/99.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/100.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/101.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/102.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/103.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/104.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/105.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/106.jpg)
- 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/107.jpg)
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 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](https://reader030.vdocuments.mx/reader030/viewer/2022040604/5ea59966893e2775c900f619/html5/thumbnails/109.jpg)
Vragen?