Event Delegation are showing its advantage,especially in large webapp. what's event delegation: http://icant.co.uk/sandbox/eventdelegation/
jquery has several plugin to support it, check the one: http://dev.jquery.com/browser/trunk/plugins/delegate/jquery.delegate.js?rev=5519 it use $.fn.is to check whether the event.target match the selector. but "$.fn.is" is too weak to support: http://docs.jquery.com/Traversing/is quote: If no element fits, or the expression is not valid, then the response will be 'false'. Note: Only simple expressions are supported. Complex expressions, such as those containing hierarchy selectors (such as +, ~, and >) will always return 'true'. filter is used internally, therefore all rules that apply there apply here, as well. for example: <body> <ul> <li><a id="it"></a></li> </ul> </body> $('#it').is('.non_exsisting_class a') will return true, unexpectly. I heard: jQuery is about to add event delegation feature in the next release. question 1: is that true? I personally think event delegation is a big thing, to break limitations, and lead UI programming more component-based style and declaritive-style. reglib is a very good javascript library to support event delegation. its author call jQuery(prototype...) as load-traverse-modify style. I suffered with that style, so I admit. reglib event give some solution to treat load-traverse-modify style. I looked into reglib's source code, some duplicates with jQuery. question 2: Is it possible to merge two projects together? reglib: http://code.google.com/p/reglib/ http://code.google.com/p/reglib/w/list actually, I'd like step further, how about write code like this: // define a component type named 'sidebar', which contains h2 and ul var sidebar = reg.defineComponent('sidebar', function(sidebar){ sidebar.init(function(){ //load tranversal and modify?? }); var h2 = sidebar.with('> h2'); var ul = sidebar.with('ul'); var li = ul.with('li'); sidebar.data(function(topData){ h2.data(topData.title); ul.data(topData.items); li.data(function(topData){ this.parent.data()[this.index] }); }); h2.click(function(){ alert(this.data()); //topData.title }); li.hover( function(){ this.addClass('hover');}, function(){ this.removeClass('hover'); } ); } // DOM(id=sidebar) will become a sidebar component, and framework will bind the data to it and sub-components. reg.match('#sidebar').to('sidebar', {:title => '...', :items => [...]}); UI-data binding is another anoying problem.
