[Proto-Scripty] Re: Blur, Focus, Event Delegation
I wrote my own code from a completely different direction before I saw
this. That code adds new events to the standard code that do bubble.
It looks cleaner than what I did. I added a 'wrapper' around the
standard code, with extra handling for the problem cases. I also
added a descendant check that is not in the regular code (which I also
found after writing mine):
/* handle bubbling for blur and focus events, so that they can be used
with event delegation
*
* Usage: $(element).bubbleUp( eventName, selector, callback );
*/
Element.addMethods(
{
bubbleUp: function( element, eventName, selector, callback )
{
var localEle = $(element);
if( arguments.length < 4 )
{
//With no selector, there is no Event
delegation, and no special
handling needed
return localEle.on( eventName, selector );//
selector is the
callback
}
if( eventName !== 'blur' && eventName !== 'focus' ) {
return localEle.on( eventName, selector,
callback );
}//End if( eventName !== 'blur' && eventName !==
'focus' ) {
if( localEle.addEventListener )
{
return localEle.addEventListener(
eventName,
function( triggerEvent )
{
var matchElement =
triggerEvent.findElement( selector );
// Documentation says
findElement returns 'document' when no
match; symptoms says 'undefined' instead
if( matchElement &&
matchElement.descendantOf( localEle ))
{
callback.bind( this )(
triggerEvent, matchElement );
}
},
true
);
}
else // !( localEle.addEventListener )
{
return localEle.on(
eventName ===
'focus'?'focusin':'focusout', // IE supports
[bubbling of] focusin and focusout
selector, callback //Extension: use
local function, and replace
event.type with blur or focus before calling callback ??
);
}//End else !( localEle.addEventListener )
}//End bubbleUp: function
}
);
On May 28, 2:28 am, Радослав Станков wrote:
> Hi, as I said in this ticket, you can use this
> code:http://gist.github.com/162593
>
> for bubbling focus/blur. I have been using it for months and never
> have a single problem with this approach :)
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Blur, Focus, Event Delegation
Hi, as I said in this ticket, you can use this code: http://gist.github.com/162593 for bubbling focus/blur. I have been using it for months and never have a single problem with this approach :) -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Blur, Focus, Event Delegation
Thanks, I went over to lighthouse and found: https://prototype.lighthouseapp.com/projects/8886/tickets/666-make-focus-blur-bubbles so it is 'scheduled' for 2.0 If I need it (beyond my exploration code), I'll just have to roll my own for now :( -- Phil -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Blur, Focus, Event Delegation
On 27 May 2010, at 09:34, T.J. Crowder wrote: As you know, `focus` and `blur` don't bubble. What you're doing works because apparently they *do* go through the "capture" phase on browsers that support the capture phase (I didn't know that, but a quick test verified it -- thanks!), and on IE (which doesn't) there's the `focusin` event that *does* bubble. So using the two together, it's possible to simulate `focus` bubbling even though it doesn't, and make that available through the delegation mechanism. I'm sure I saw a discussion somewhere just recently about adding support for `focus` delegation (because I remember someone saying jQuery does), but I can't immediately find where it was. NWEvents has done so for a long time, if JQuery does it, they probably were inspired by it. But As T.J. pointed out, a feature request is the way to go. Best regards Peter De Berdt -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Blur, Focus, Event Delegation
Hi,
> Not sure if this is a bug report, feature request, help request, or
> even just a complaint about the state of the world :)
LOL! I think it's a feature request.
As you know, `focus` and `blur` don't bubble. What you're doing works
because apparently they *do* go through the "capture" phase on
browsers that support the capture phase (I didn't know that, but a
quick test verified it -- thanks!), and on IE (which doesn't) there's
the `focusin` event that *does* bubble. So using the two together,
it's possible to simulate `focus` bubbling even though it doesn't, and
make that available through the delegation mechanism.
I'm sure I saw a discussion somewhere just recently about adding
support for `focus` delegation (because I remember someone saying
jQuery does), but I can't immediately find where it was.
In any case, I'd suggest searching open tickets on Lighthouse[1] and
if it's not already there, logging an enhancement request.
[1] https://prototype.lighthouseapp.com/projects/8886-prototype/overview
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On May 27, 2:14 am, mmerlin wrote:
> 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
> athttp://www.ruby-forum.com/topic/159048,
> tried a variation of the code athttp://pastie.org/pastes/186221).
> 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.
>
> So:
>
> 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.
>
> Using:
> 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
>
> --
> mMerlin
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
