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