This document discusses different approaches to handling events in JavaScript and jQuery. It covers the DOM event model, jQuery's event binding methods like bind, live, and delegate. It also discusses custom events, namespaced events, and binding events to non-DOM objects. While jQuery's bind provides a basic event model, more elaborate models exist and need to be implemented carefully to avoid poor design. Examples of other event models mentioned include CKEditor and Node.js. The document stresses binding minimal logic to native events and considering assumptions made with techniques like escape closing dialogs.

1. Evented Javascript

2. Refresher DOM Event Model addEventListener& attachEvent jQuery Bind $.bind(‘click’, function(){…}) jQuery Shortcuts $.click(function(){…}) jQuery Live & Delegate $.live(‘click’, func…), $.delegate(‘#foo’, ‘click’, func…)

3. More Bind Custom Events $.bind(‘closeDialog’, func…) Namespaced Events $.bind(‘click.linkDialog’, func…) $.bind(‘closeDialog.linkDialog’, func…) Bind to Non-DOM Objects $(confluence.linkDialog).bind(‘closeDialog’, func…) $(confluence.linkDialog).trigger(‘closeDialog’)

4. $.bind as an event model Provides starting place More elaborate event models exist More power affords flexibility but lends itself to poor execution of an event driven design

5. Other Event Models CKEditor node.js

6. Back to The DOM and jQuery Dialog, escape closes dialog Autocomplete, escape closes suggestions stopPropagation becomes necessary Return false is actually evil Assumptions made

7. Binding to Native Events Bind almost no logic to native events

8. Sources TinyMCE.com CKEditor.com nodejs.org YUI Blog - http://www.yuiblog.com/blog/2007/01/17/event-plan/ Event Driven Javascript - http://www.slideshare.net/fgalassi/event-driven-javascript