jQuery Default Events

by Justin Meyer

jQuery Default Events

Justin Meyer Event Oriented Architectures (EOAs) are an emerging best practice when designing reusable JavaScript widgets. jQuery's trigger, triggerHandler, and jQuery.event.special[EVENT]._default methods have enabled widget authors to easily expose custom events to developers. However, these methods lack the scalability or expressiveness to enable powerful EOAs.

posted in Development on June 2, 2010 by Justin Meyer

Event Oriented Architectures (EOAs) are an emerging best practice when
designing reusable JavaScript widgets. jQuery’s trigger,
triggerHandler, and jQuery.event.special[EVENT]._default methods
have enabled widget authors to easily expose custom events to
developers. However, these methods lack the scalability or
expressiveness to enable powerful EOAs.

JavaScriptMVC’s jquery.event.default plugin provides an easier and
more scalable way of providing default events.


1.3kb) [works with latest jQuery on



– a tabs widget that uses default events.

Event Oriented Architectures

EOAs are simply widgets that produce synthetic events that you can
listen to similar to a native event. For example, jQuery UI’s tabs

produces events like tabselect that you can register event handlers on

$('#mytabs').bind('tabselect', function(){
  //called before a tab is selected

Why EOAs?

There are many other methods of exposing a widget’s API. The most common
is taking a callback function when the widget is created. jQuery.UI’s

also allows you to do this:

  select : function(){
    //called when a tab is selected

But, this only allows one responder! It’s possible that many objects
want to know when something happens in your widget.

If you use Dojo, you might be lucky enough to use
Connect allows you to bind to any other function. By just exposing a
function, any other object can be notified when that function is called.

//in the tabs widget
myTabsWidget = {
  select : function(){
     //tabs select functionality
// somewhere in your code
dojo.connect(myTabs,"select",null, function(){
  //called when select is called on myTabs

Another multiple-callback solution is using a library like
Hub allows you to publish and subscribe messages like:

//in your tabs widget

//in your code
OpenAjax.hub.subscribe("tab.select", function(called, tab){
 //do stuff!

But these options suck compared to synthetic events for UI widgets

  • Developers already understand DOM events and how to listen to them.
  • Bubbling events naturally group related widgets. Ex: respond to all
    ‘activate’ events by listening on a parent element.

jQuery and EOAs

jQuery makes creating EOAs simple, if underpowered. Bind, delegate, and
live can listen to arbitrary events on elements. Trigger creates
synthetic events that bubble like a DOM events. The following shows the
first hidden element in the page:

//listen for show events on the document
$(document).bind('show', function(ev){
  //show the target

//trigger show on the first hidden element

Trigger makes it easy to create synthetic events and expose a callback
API. But to make these callback functions more powerful and DOM-like, we
need to provide default events.

Default Events

We’re all familiar with default events in the DOM. Here’s a few

  • clicking a link -> Follows the link
  • clicking submit in a form -> posts the form
  • mousedown on text -> starts selecting text

And with jQuery, we are used to preventing default events by returning
false or calling prevent default:

  ev.preventDefault();  //these 2 lines
  return false;         //do the same thing

What if we could set default behaviors for certain events on our widgets
and let others prevent them in the same way? How awesome!


In jQuery 1.4.3, a _default function can be set on special events. For
more info check out jQuery’s
The _default function is called after all event handlers for an event
type have been called. For example:

$.event.special.show ={
  _default : function(ev){


jQuery doesn’t go far enough in making default events practical for
complex applications. Consider the following problems:

  • What if multiple plugins define a show default event?
  • What if there are multiple tabs plugins, each with its own default
    tabselect event?

plugin makes using default events scalable and organized.


The default plugin lets you add default functionality by binding a
default event handler. Just prefix the event with “default.“. The
following provides default show behavior for ‘.tab‘ elements inside a
#tab‘ element:


Of course, global default events are still supported, but without
stomping on other code:



Use bind, delegate, or live to listen for default events. The
default event handler only gets called if preventDefault is not called.

triggerDefault and triggerDefaults

The jquery.event.default.js file provides two useful helpers to trigger
events and return if default events were triggered.

// synthetic event bubbles
$('#foo').triggerDefaults('show'); //-> true/false

// synthetic event does not bubble
$('#foo').triggerDefault('show'); //-> true/false

The Demo

uses default events to provide a tabs widget. The default ‘show’ event
is prevented on the second tab until the first tab’s checkbox is

Here’s the code:

// create a tabs plugin
$.fn.tabs = function(){

  // finds the tab from the tab button
  var sub = function(el){
    return $(el.find("a").attr("href"))

    var tab = $(this);

    // set the first tab button as active

    // hide all the other tabs

    // listen for a click on a tab button
    tab.delegate("li","click", function(ev){
      var el = $(this);

      if( // not active button
        !el.hasClass('active') && 
        // default wasn't prevented

        // remove active and hide old active    

        //mark as active

  // show a tab if default isn't prevented
  .delegate(".tab","default.show", function(ev){

// create tabs widget

// listen on the second tab for show

  //if complete isn't checked
  if(! $("#complete")[0].checked ){

    //prevent the default action!

Here’s how the code works:

  1. When an li in the tabs is clicked, it checks if it isn’t active
    and uses sub to find the tab content for that li.
  2. It triggers a show action on the tab content.
  3. It listens to show events on the #second tab, if the checkbox
    isn’t checked, it prevent default events.
  4. Assuming that default events are allowed, the “.tab” default
    show” event will show the tab.
  5. After the event has finished, control returns back to the original
    li click handler. If default events were allowed, it hides the
    old tab.


Default events and event oriented architecture is, to be sure, an
advanced JavaScript technique. However, the JavaScriptMVC default event
plugin makes building sophisticated and extendable widgets slightly
easier. It’s a powerful technique, use it with care.

Using CanJS 2.2 with StealJS and NPM

David Lueckeposted in Development, Open Source on April 23, 2015 by David LueckeCanJS can be used in many different module formats like AMD and CommonJS and package managers like Bower and NPM. In this post we will talk about using CanJS with the new StealJS and NPM.

Set Algebra with can-set

Justin Meyerposted in Development, Open Source on April 22, 2015 by Justin Meyercan-set is a client and server side JavaScript utility that makes set algebra easy. This article talks about the design goals of can-set and introduces a few cases where you might find it useful.

CanJS 2.2 Release

Justin Meyerposted in Development, Open Source, Uncategorized on April 5, 2015 by Justin MeyerCanJS 2.2 is out. It's awesome. This article covers the top 10 enhancements added since 2.1. Some of the improvements include Browserify and StealJS support, can-EVENT arguments, observable promises, and in-page automatically rendered templates. The article includes a lot of good JSBins to learn from too.

Contact Us
(312) 620-0386 | contact@bitovi.com
 or cancel