[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, Радослав Станков rstan...@gmail.com 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
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 mmerlin.p...@gmail.com 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.
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
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.
