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 (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

http://www.lovemikeg.com	65
http://www.slideshare.net	11
http://static.slideshare.net	1
http://64.233.169.104	1
http://staging.facebook.slideshare.com	1

JavaScript From Scratch: Events

by Michael Girouard on Jun 10, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 79

Statistics

JavaScript From Scratch: Events — Presentation Transcript