Which JavaScript libraries have event delegation?

Question

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 community wiki. Please help me fill in the list.

Prototype: no

jQuery: as of 1.3

MooTools: as of 2.0

ExtJS: yes

Enchondroma

Answer 1

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.

Tamper

I'll list Prototype with a "no" in the chart. – Enchondroma

Answer 2

Event delegation is easier than you think.

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

Musgrove

OK. Then which libraries DON'T have event delegation? :-) – Enchondroma

Answer 3

Ext Js always has I believe.

Gumbo

Indeed. Ext also has event delegation built into many of its widgets, e.g., for handling drag/drop and other event-intensive interactions to maximize performance. – Despinadespise

Answer 4

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.

Registrar

I'm compiling a list of which ones add the sugar. – Enchondroma

True. But, I thought it would be fun to try reimplementing live in Prototype to see how easy it would be. Turns out, pretty easy. – Registrar

Answer 5

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

Unlicensed

I'm going to try MooTools as soon as 2.0 rolls out, which I think is soon. – Enchondroma