Not sure if this is a bug report, feature request, help request, or
even just a complaint about the state of the world :)

Using Prototype 1.7 rc2, I have been exploring event delegation with
the new Element#on functionality, using the css selector filter.  My
initial tests with click (and dblclick) events worked fine, but when I
moved on to blur and focus, things broke.
The blur and focus events work fine as long as the the '.on' is for
the actual (in my sample) input fields, but the events do not trigger
(bubble) if I set the handler on an ancestor element.
It is *possible* to get the functionality (bubbling) to work, by
bypassing some of the prototype functionality, using .addEventListener
(for most browsers), and .observe with 'focusin' and 'focusout' events
(for IE).  (I found a sample for that at,
tried a variation of the code at
That though falls back on the old techniques, where the handler needs
do something like findElement to figure out what the 'requested' event
should be associated with.


Is there a way to get $(ele).on( some_event, css_selector ) ...
to trigger for blur and focus events on descendant elements of ele
with rc2?

Is that 'intended' to work with the latest code, since it is supposed
to "provide first-class support for event delegation"?

The 'basic' code I am trying to use is:
DelegationExplorer.start( ele, 'click', '.special' );
DelegationExplorer.start( ele, 'dblclick', '.special' );
DelegationExplorer.start( ele, 'blur', '.special' );
DelegationExplorer.start( ele, 'focus', '.special' );
 start: function(){
this.handlers[localEvn][eleId] = $(eleId).on( localEvn, localSel,
function( triggerEvent, matchElement ) {
 DelegationExplorer.genericHandler( triggerEvent, matchElement );

were ele is an ancestor of an input field [type=text or textarea].  I
have debug / introspection / reporting code in genericHandler to tell
which events are getting through.  Click and dblclick get reported,
blur and focus do not.

this.handlers[localEvn][eleId] = $(eleId).on( localEvn,
function( triggerEvent, matchElement ) {
 DelegationExplorer.directHandler( triggerEvent, matchElement );
triggers just fine, when eleId is the actual input field.

The 'fudge' to get [most of] the functionality (without the css
filter) is:
var myRoot = $('frm');
if( myRoot.addEventListener )
myRoot.addEventListener( 'focus', DelegationExplorer.directHandler,
true );
myRoot.addEventListener( 'blur', DelegationExplorer.directHandler,
true );
} else {
// IE supports focusin and focusout
myRoot.observe( 'focusin', DelegationExplorer.directHandler );
myRoot.observe( 'focusout', DelegationExplorer.directHandler );
where frm is again an ancestor of the input fields


You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to