Your SlideShare is downloading. ×
JavaScript From Scratch: Events
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript From Scratch: Events

3,334
views

Published on

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

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

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
90
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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