I'd like to try out a new JavaScript library. Having used (and loved) jQuery 1.3's "Live" events, I'd prefer the next library I try to have event delegation built in to the event system. Wikipedia's JS Library Comparison falls down on the job here.

Looks like MooTools is getting it in 2.0. What about the others?

I'm making this munity wiki. Please help me fill in the list.

Prototype: no

jQuery: as of 1.3

MooTools: as of 2.0

ExtJS: yes

I'd like to try out a new JavaScript library. Having used (and loved) jQuery 1.3's "Live" events, I'd prefer the next library I try to have event delegation built in to the event system. Wikipedia's JS Library Comparison falls down on the job here.

Looks like MooTools is getting it in 2.0. What about the others?

I'm making this munity wiki. Please help me fill in the list.

Prototype: no

jQuery: as of 1.3

MooTools: as of 2.0

ExtJS: yes

• javascript
• event-delegation

5 Answers 5

Event delegation is easier than you think.

If I find a library without automatic event delegation, I just add a layer to it.

I'd suggest looking into Prototype. It is listed on SO about as frequently as jQuery and I use it as my JS library for all my projects.

I don't believe it has delegates built in but it is a full featured library with all the necessary functionality to add delegates to as needed.

If you love using Jquery but fancy trying something different I would go with mootools, the link to Aarons event delegation plugin plus his tutorial on how to use the original should give you all you need. There is a lot of discussion about which is better at the end of the day its just what you prefer.

Mootools is excellent and has some good plugins, you should also check out David Walsh who does a lot of mootools dev and some Jquery. He posts some interesting stuff. http://davidwalsh.name

Event delegation is just about hanging event handlers further up the DOM tree. All of the frameworks can/should be able to do that. The handlers should be able to pickup any event that bubbles. The event contains the element that triggered it, and from that the handler can do whatever.

Prototype doesn't have any event delegation sugar native to the library that works like jQuery's $.fn.live, but it is fairly simple to build a function that catches events and does stuff with their target elements.

document.observe('click',function(event){alert(event.element().inspect())})

You can use this to make a clone of jQuery's live pretty easily(I am not saying this will perform well or anything).

live = function(selector,callback){
  document.observe("click",function(e){
    var element = e.element()
    if (!element.match(selector))
      element = element.ancestors().find(function(elem){return elem.match(selector)});
    else
      element = null
    if (element)
      callback.apply(element)
  })
}

You could call it like:

live("div",function(){this.setStyle({color:'blue'})})

I guess what I am saying is that event delegation is built in to javascript already. Libraries just add sugar.

Ext Js always has I believe.