JavaScript From Scratch: Events
Click here to load reader
-
Upload
michael-girouard -
Category
Technology
-
view
3.780 -
download
0
Transcript of JavaScript From Scratch: Events
JavaScript from Scratch“Events”
1
Agenda
• Concepts of Event-driven Development
• Applying Events
• Removing Events
• Types of Events
2
Interactivity
3
Responsiveness
4
Enhanced User Experience
5
The Old Way
onclick=“doSomething()”(HTML)
6
The Easy Way
var el = document.getElementById(‘foo’);
el.onclick = doSomething;
7
The Right Way
var el = document.getElementById(‘foo’);
el.addEventListener( ‘click’, doSomething, false);
8
The IE Way
var el = document.getElementById(‘foo’);
el.attachEvent( ‘onclick’, doSomething);
9
The Old/Easy Way
var el = document.getElementById(‘foo’);
el.onclick = null;
10
The Right Way
var el = document.getElementById(‘foo’);
el.removeEventListener( ‘click’, doSomething, false);
11
The IE Way
var el = document.getElementById(‘foo’);
el.dettachEvent( ‘onclick’, doSomething);
12
• load
• unload
• resize
• scroll
• focus
• blur
• error
Interface Events
13
Mouse Events
• mouseover
• mouseout
• mousemove
• mouseup
• mousedown
• click
• dblckick
14
Form Events
• focus
• blur
• change
• reset
• submit
• keydown
• keyup
• keypress
15
The Event Reference
http://quirksmode.org/dom/events/index.html
16
Key Take-aways
• Functions are data types too
• When you pass a function to a listener, you pass a reference to that function
• You can also pass function literals too
17
Homework
• Create a cross browser event library
• Must support: IE Model and W3 Model
• Should fall back on Netscape Model if nothing else works
18
Homework
• Required Functions
• addEvent (el, event, callback)
• removeEvent (el, event, callback)
19