HS6: Events vervolg
Changing default behavior
,Enkele events
Load
Afgevuurd als een object geladen is
Vaak gebruikt om het script pas uit te voeren als de volledige pagina geladen is
Vb.
<head>
<script>
Window.onload = function() {
…
} // einde window.onload
</script>
</head>
Of: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload
d
Blur
Event om bv bij het verlaten van een tekstveld een eventhandler op te roepen die de input
checkt
Wordt afgevuurd als element focus verliest
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onblur
Focus
Wordt afgevuurd als element focus krijgt
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onfocus
Gebruik geen html event handlers zoals in deze voorbeelden
Mousedown
Wordt afgevuurd als de gebruiker één van de knoppen van de muis ingedrukt houdt
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown
Mouseup
Wordt afgevuurd als de gebruiker één van de knoppen van de muis loslaat
Keydown
Afgevuurd als user toets induwt
Keyup
Afgevuurd als user toets loslaat
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown_onkeyup
, Keypress
Afgevuurd als user toets loslaat
Browserverschillen, test pijltjestoetsen, alt, shift in chrome en firefox
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
HS7: jQuery
Inleiding
Wat is jQuery?
Lightweight open-source Javascript-library
Legt focus op taken zoals
- Manipuleren van elementen
- Werken via het DOM event model
- Moedigt unobstrusive JavaScript aan!
Voordelen van jQuery?
javascript jQuery
Verschillen tussen browsers Crossbrowser compability
(zelf fallbacks schrijven)
complexe DOM navigatie Simpele CSS-selectoren
Frequente taken vergen veel code Write less, do more
(loop om geselecteerde elementen te - Doorlopen van elementen
doorlopen, events, …) - Chaining statements
Write more, do less - Animatie
Heel veel plugins en extensies
Basisfilosofie
Wie gebruikt jQuery?
http://docs.jquery.com/Sites_Using_jQuery
Changing default behavior
,Enkele events
Load
Afgevuurd als een object geladen is
Vaak gebruikt om het script pas uit te voeren als de volledige pagina geladen is
Vb.
<head>
<script>
Window.onload = function() {
…
} // einde window.onload
</script>
</head>
Of: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload
d
Blur
Event om bv bij het verlaten van een tekstveld een eventhandler op te roepen die de input
checkt
Wordt afgevuurd als element focus verliest
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onblur
Focus
Wordt afgevuurd als element focus krijgt
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onfocus
Gebruik geen html event handlers zoals in deze voorbeelden
Mousedown
Wordt afgevuurd als de gebruiker één van de knoppen van de muis ingedrukt houdt
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown
Mouseup
Wordt afgevuurd als de gebruiker één van de knoppen van de muis loslaat
Keydown
Afgevuurd als user toets induwt
Keyup
Afgevuurd als user toets loslaat
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown_onkeyup
, Keypress
Afgevuurd als user toets loslaat
Browserverschillen, test pijltjestoetsen, alt, shift in chrome en firefox
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
HS7: jQuery
Inleiding
Wat is jQuery?
Lightweight open-source Javascript-library
Legt focus op taken zoals
- Manipuleren van elementen
- Werken via het DOM event model
- Moedigt unobstrusive JavaScript aan!
Voordelen van jQuery?
javascript jQuery
Verschillen tussen browsers Crossbrowser compability
(zelf fallbacks schrijven)
complexe DOM navigatie Simpele CSS-selectoren
Frequente taken vergen veel code Write less, do more
(loop om geselecteerde elementen te - Doorlopen van elementen
doorlopen, events, …) - Chaining statements
Write more, do less - Animatie
Heel veel plugins en extensies
Basisfilosofie
Wie gebruikt jQuery?
http://docs.jquery.com/Sites_Using_jQuery
