JavaScript From Scratch: Events

3,775 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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,775
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
92
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript From Scratch: Events

  1. 1. JavaScript from Scratch “Events” 1
  2. 2. Agenda • Concepts of Event-driven Development • Applying Events • Removing Events • Types of Events 2
  3. 3. Interactivity 3
  4. 4. Responsiveness 4
  5. 5. Enhanced User Experience 5
  6. 6. The Old Way (HTML) onclick=“doSomething()” 6
  7. 7. The Easy Way var el = document.getElementById(‘foo’); el.onclick = doSomething; 7
  8. 8. The Right Way var el = document.getElementById(‘foo’); el.addEventListener( ‘click’, doSomething, false ); 8
  9. 9. The IE Way var el = document.getElementById(‘foo’); el.attachEvent( ‘onclick’, doSomething ); 9
  10. 10. The Old/Easy Way var el = document.getElementById(‘foo’); el.onclick = null; 10
  11. 11. The Right Way var el = document.getElementById(‘foo’); el.removeEventListener( ‘click’, doSomething, false ); 11
  12. 12. The IE Way var el = document.getElementById(‘foo’); el.dettachEvent( ‘onclick’, doSomething ); 12
  13. 13. Interface Events • load • focus • unload • blur • resize • error • scroll 13
  14. 14. Mouse Events • mouseover • mousedown • mouseout • click • mousemove • dblckick • mouseup 14
  15. 15. Form Events • focus • submit • blur • keydown • change • keyup • reset • keypress 15
  16. 16. The Event Reference http://quirksmode.org/dom/events/index.html 16
  17. 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. 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. 19. Homework • Required Functions • addEvent (el, event, callback) • removeEvent (el, event, callback) 19

×