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
(HTML)
onclick=“doSomething()”
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

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

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

Form Events
• focus • submit
• blur • keydown
• change • keyup
• reset • 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