inline event handlers
Inline event handlers

One invocation chain – many invocations

A concept similar to event-triggered repeat-loops is the usage of inline event handlers. This is a way to define any action that has to happen after an event is triggered in a single jQuery line:

$('button').on('click').next().css({left:'+=20px'});

Move forward Watch me moving!

The example above uses the syntax .on('click'). There are more ways to do the same. In our case the following lines behave all equal:

$('#myButton').on('click').next()…
$('#myButton').on('click',$).next()…
$('#myButton').bind('click').next()…
$('#myButton').bind('click',$).next()…
$('#myButton').click($).next()…
$('#myButton').repeat('click').next()…
$('#myButton').repeat().wait('click').next()…
$('#myButton').repeat().one('click').next()…

We see that the .on() method supports the usage without any handler function and with the $ token. The same does the .bind() method.
An even shorter notation is the usage of click($). This works for all DOM events because they internally forward the $ token to the .bind() method.

Difference between .repeat(event) and .on(event)

The .repeat('click') case works as well because we have only one element here. If we have multiple elements then .repeat(event) continues with all elements in the jQuery selection while .on(event) continues with the triggered element only – just like the classical event handlers.

There is another difference between .repeat(event) and .on(event). As stated on the page before all repeat-loops are running sequential. In contrast event handlers do not know this restriction. They start running as soon as an event is triggered, hence spawning multiple running jQuery chains, each working independently of the others.

Difference between .wait(event) and .one(event)

A special case of .on(event) or .bind(event) is the method .one(event). The latter triggers the given event handler only once. After that the handler is unregistered immediately.

In jquery-timing this method also runs the inlined chain only once. As a result the two methods .wait(event) and .one(event) have a similar meaning. The main difference is that .wait() will always continue with the underlying jQuery selection context. And .one(event) or .one(event,$) will continue with the triggered element only.

The event object as loop counter

As said before loops are internally counting their iterations and allow those counter variables to be used in several callback methods. This similar works with event loops. Because they are running independently the event object itself is used instead of a counter. I.e. wherever you need access to the event object you get it by using callback functions in one of our timing methods. The simplest case:

$('button').on('click').jQueryStuff().then(function(event){
   event.preventDefault();
});

Any custom data for an event binding is forwarded to the event object also:

$('button').on('click',['foo',5]).jQueryStuff().then(function(event){
   alert(event[0]); // now gives "foo"
   alert(event[1]); // now gives 5
});

Leaving the chain through backdoor

In classical jQuery you can define multiple event handlers by chaining their definitions. With inline event handlers you can do almost the same. We use the underscore character "_" as a backdoor to leave any deferred jQuery chain:

$('#myButton').click(function(){
      $(this).addClass('clicked').…
    })
  .mouseenter(function(){
      $(this).addClass('hover').…
    })
  .mouseleave(function(){
      $(this).removeClass('hover').…
    })
  .…

$('#myButton').click($).addClass('clicked').…
  ._.mouseenter($).addClass('hover').…
  ._.mouseleave($).removeClass('hover').…
  ._.…

As you see using inline event handlers can help creating very short and clean code.

Nested inline handlers

If for some reason you put an inline event handler into an inline-loop (repeat, each, or within another event handler), then it will be used as a deferred object. I.e. the first trigger to that event will let the surrounding deferred jQuery chain continue.