The third part of an 8 part series covering the basics of the JavaScript language. This presentation discusses event concepts, adding, and removing events.

1. JavaScript from Scratch
“Events”
1

2. Agenda
• Concepts of Event-driven Development
• Applying Events
• Removing Events
• Types of Events
2

3. Interactivity
3

4. Responsiveness
4

5. Enhanced User
Experience
5

6. The Old Way
(HTML)
onclick=“doSomething()”
6

7. The Easy Way
var el =
document.getElementById(‘foo’);
el.onclick = doSomething;
7

8. The Right Way
var el =
document.getElementById(‘foo’);
el.addEventListener(
‘click’, doSomething, false
);
8

9. The IE Way
var el =
document.getElementById(‘foo’);
el.attachEvent(
‘onclick’, doSomething
);
9

10. The Old/Easy Way
var el =
document.getElementById(‘foo’);
el.onclick = null;
10

11. The Right Way
var el =
document.getElementById(‘foo’);
el.removeEventListener(
‘click’, doSomething, false
);
11

12. The IE Way
var el =
document.getElementById(‘foo’);
el.dettachEvent(
‘onclick’, doSomething
);
12

13. Interface Events
• load • focus
• unload • blur
• resize • error
• scroll
13

14. Mouse Events
• mouseover • mousedown
• mouseout • click
• mousemove • dblckick
• mouseup
14

15. Form Events
• focus • submit
• blur • keydown
• change • keyup
• reset • keypress
15

16. The Event Reference
http://quirksmode.org/dom/events/index.html
16

17. 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

18. 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

19. Homework
• Required Functions
• addEvent (el, event,
callback)
• removeEvent (el, event,
callback)
19