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

JavaScript From Scratch: Events

on

  • 5,278 views

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.

Statistics

Views

Total Views
5,278
Views on SlideShare
5,199
Embed Views
79

Actions

Likes
4
Downloads
90
Comments
0

5 Embeds 79

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript From Scratch: Events JavaScript From Scratch: Events Presentation Transcript

    • 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