Evented Javascript<br />
Refresher<br />DOM Event Model <br />addEventListener& attachEvent<br />jQuery Bind<br />$.bind(‘click’, function(){…})<br...
More Bind<br />Custom Events<br />$.bind(‘closeDialog’, func…)<br />Namespaced Events<br />$.bind(‘click.linkDialog’, func...
$.bind as an event model<br />Provides starting place<br />More elaborate event models exist<br />More power affords flexi...
Other Event Models<br />CKEditor<br />node.js<br />
Back to The DOM and jQuery<br />Dialog, escape closes dialog<br />Autocomplete, escape closes suggestions<br />stopPropaga...
Binding to Native Events<br />Bind almost no logic to native events<br />
Sources<br />TinyMCE.com<br />CKEditor.com<br />nodejs.org<br />YUI Blog - http://www.yuiblog.com/blog/2007/01/17/event-pl...
Upcoming SlideShare
Loading in …5
×

Evented Javascript

639 views

Published on

Using events in various javascript environments.

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

  • Be the first to like this

No Downloads
Views
Total views
639
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Evented Javascript

  1. 1. Evented Javascript<br />
  2. 2. Refresher<br />DOM Event Model <br />addEventListener& attachEvent<br />jQuery Bind<br />$.bind(‘click’, function(){…})<br />jQuery Shortcuts<br />$.click(function(){…})<br />jQuery Live & Delegate<br />$.live(‘click’, func…), $.delegate(‘#foo’, ‘click’, func…)<br />
  3. 3. More Bind<br />Custom Events<br />$.bind(‘closeDialog’, func…)<br />Namespaced Events<br />$.bind(‘click.linkDialog’, func…)<br />$.bind(‘closeDialog.linkDialog’, func…)<br />Bind to Non-DOM Objects<br />$(confluence.linkDialog).bind(‘closeDialog’, func…)<br />$(confluence.linkDialog).trigger(‘closeDialog’)<br />
  4. 4. $.bind as an event model<br />Provides starting place<br />More elaborate event models exist<br />More power affords flexibility but lends itself to poor execution of an event driven design<br />
  5. 5. Other Event Models<br />CKEditor<br />node.js<br />
  6. 6. Back to The DOM and jQuery<br />Dialog, escape closes dialog<br />Autocomplete, escape closes suggestions<br />stopPropagation becomes necessary<br />Return false is actually evil<br />Assumptions made<br />
  7. 7. Binding to Native Events<br />Bind almost no logic to native events<br />
  8. 8. Sources<br />TinyMCE.com<br />CKEditor.com<br />nodejs.org<br />YUI Blog - http://www.yuiblog.com/blog/2007/01/17/event-plan/<br />Event Driven Javascript - http://www.slideshare.net/fgalassi/event-driven-javascript<br />

×