New Clientcide plugins: pointy things, event delegation and more

4 views
Skip to first unread message

Aaron

unread,
Dec 23, 2008, 7:49:07 PM12/23/08
to MooTools Users
Greetings MooToolers,

I have some new plugins for your holiday enjoyment because you've all
been so good this year.

First, a new suite of StickyWin plugins that provide a tool-tip layout
that points in whatever direction you choose (it's cooler than it
sounds). This is integrated into a StickyWin class
(StickyWin.PointyTip), the MooTools Tips class (Tips.Pointy), and
FormValidator (FormValidator.Tips). You can read about it all here:

http://www.clientcide.com/code-releases/loads-of-new-plugins-pointytips-formvalidatortips-eventdelegation-and-more/

Secondly I have a new Element extension for event delegation. Event
delegation is a common practice where by you attach an event listener
to a parent object to monitor its children rather than attach events
to all the children. It’s far more efficient when you have numerous
items on a page that you want to interact with.

Instead of doing

$$('a').each(function(el) {
el.addEvent('click', function(){
alert('you clicked a link!');
});
});

which can have a big startup cost on a page full of links, you
delegate the event to the parent:

$(document.body).delegate('click', 'a', function(){
alert('you clicked a link!');
});

Only one event gets attached and it's far more efficient. Check out
the longer article here:

http://www.clientcide.com/code-releases/event-delegation-for-mootools/

And examples in action here:

http://www.clientcide.com/wiki/cnet-libraries/04-element/0.1-element.delegate

cheeaun

unread,
Dec 23, 2008, 8:49:36 PM12/23/08
to MooTools Users
On Dec 24, 8:49 am, Aaron <anut...@gmail.com> wrote:

>...
>
> Secondly I have a new Element extension for event delegation. Event
> delegation is a common practice where by you attach an event listener
> to a parent object to monitor its children rather than attach events
> to all the children. It’s far more efficient when you have numerous
> items on a page that you want to interact with.
>
> Instead of doing
>
> $$('a').each(function(el) {
>    el.addEvent('click', function(){
>       alert('you clicked a link!');
>    });
>
> });
>
> which can have a big startup cost on a page full of links, you
> delegate the event to the parent:
>
> $(document.body).delegate('click', 'a', function(){
>    alert('you clicked a link!');
>
> });
>
> Only one event gets attached and it's far more efficient. Check out
> the longer article here:
>
> http://www.clientcide.com/code-releases/event-delegation-for-mootools/
>
> And examples in action here:
>
> http://www.clientcide.com/wiki/cnet-libraries/04-element/0.1-element....

This is cool but for some reason, I prefer the syntax to be something
like this?:

$(element).delegate('click', function(){
alert('you clicked a link!');
});

.. though I think it's assumed that all events are added to
document.body

By the way, also watching this ticket:
http://mootools.lighthouseapp.com/projects/2706/tickets/55-event-delegation-method-for-element

ibolmo

unread,
Dec 24, 2008, 1:08:35 AM12/24/08
to MooTools Users
Not necessarily. Especially if you have a hierarchy of delegation. (oh
wait.. but that's what DOM bubbling is all about).
> By the way, also watching this ticket:http://mootools.lighthouseapp.com/projects/2706/tickets/55-event-dele...

cheeaun

unread,
Dec 24, 2008, 1:45:46 AM12/24/08
to MooTools Users
Ya, I guess it's more of performance issue? As I read from Simon
Willison's blog:
http://simonwillison.net/2008/Dec/23/live/

If then, say if I do this:

$$('div a').delegate('click', function(){
alert('you clicked a link!');
});

.. then probably could delegate the event to the 'div' element instead
of all the way to document.body :P

nutron

unread,
Dec 24, 2008, 2:06:13 AM12/24/08
to mootool...@googlegroups.com
DON'T use it on $$ - that means you're delegating to all the anchors in divs. Do:

$('myDiv').delegate('click', 'a', fn);

As for this suggestion:

>$(element).delegate('click', function(){ 
>  alert('you clicked a link!'); 
>}); 
>.. though I think it's assumed that all events are added to document.body 

That couldn't work. What's element in this code? Delegation is all about watching event bubbling for targets that match some test.

On Tue, Dec 23, 2008 at 10:46 PM, cheeaun (via Nabble) <ml-user%2B57134-891164727@...> wrote:

Ya, I guess it's more of performance issue? As I read from Simon
Willison's blog:
http://simonwillison.net/2008/Dec/23/live/

If then, say if I do this:

$$('div a').delegate('click', function(){
  alert('you clicked a link!');
});

.. then probably could delegate the event to the 'div' element instead
of all the way to document.body :P

On Dec 24, 2:08 pm, ibolmo <Olmo.Maldon...@...> wrote:

> Not necessarily. Especially if you have a hierarchy of delegation. (oh
> wait.. but that's what DOM bubbling is all about).
>
> On Dec 23, 7:49 pm, cheeaun <chee...@...> wrote:

The MooTools Tutorial: www.mootorial.com Clientcide: www.clientcide.com


View this message in context: Re: New Clientcide plugins: pointy things, event delegation and more
Sent from the MooTools Users mailing list archive at Nabble.com.

cheeaun

unread,
Dec 24, 2008, 4:48:45 AM12/24/08
to MooTools Users
On Dec 24, 3:06 pm, nutron <anut...@gmail.com> wrote:
> DON'T use it on $$ - that means you're delegating to all the anchors in
> divs. Do:
> $('myDiv').delegate('click', 'a', fn);

Oh, understood. 0_0

> As for this suggestion:
>
> >$(element).delegate('click', function(){
> >  alert('you clicked a link!');
> >});
> >.. though I think it's assumed that all events are added to document.body
>
> That couldn't work. What's element in this code? Delegation is all about
> watching event bubbling for targets that match some test.

Aha, I see now why it cannot work. I did a little trick and came up
with this:
http://jsbin.com/etuqe

> On Tue, Dec 23, 2008 at 10:46 PM, cheeaun (via Nabble) <
> ml-user+57134-891164...@n2.nabble.com<ml-user%2B57134-891164...@n2.nabble.com>
>
>
>
> > wrote:
>
> > Ya, I guess it's more of performance issue? As I read from Simon
> > Willison's blog:
> >http://simonwillison.net/2008/Dec/23/live/
>
> > If then, say if I do this:
>
> > $$('div a').delegate('click', function(){
> >   alert('you clicked a link!');
> > });
>
> > .. then probably could delegate the event to the 'div' element instead
> > of all the way to document.body :P
>
> > On Dec 24, 2:08 pm, ibolmo <Olmo.Maldon...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1714471&i=0>>
> > wrote:
> > > Not necessarily. Especially if you have a hierarchy of delegation. (oh
> > > wait.. but that's what DOM bubbling is all about).
>
> > > On Dec 23, 7:49 pm, cheeaun <chee...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1714471&i=1>>
> > wrote:
>
> > > > On Dec 24, 8:49 am, Aaron <anut...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1714471&i=2>>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> Clientcide:  http://www.clientcide.comwww.clientcide.com
> --
> View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...

Michelle Steigerwalt

unread,
Dec 24, 2008, 10:39:49 AM12/24/08
to MooTools Users
Hey Aaron,

We've actually already written the event delegation code for 1.3.
Right now, we're working on the specifics of integrating it into
MooTools.

Daniel Steigerwald has been doing some pretty amazing work on this
feature for quite some time now. You can see his demo here:
http://daniel.steigerwald.cz/demos/delegated/default.htm. We've been
tweaking the API a bit, but that code is pretty close to what's going
to go into MooTools.

Unfortunately, the syntaxes are very different, so people using
the Clientcide version of event delegation are either going to have to
rewrite those portions of their applications for the next version of
MooTools or commit to using a third-party plugin.

-- Michelle Steigerwalt

nutron

unread,
Dec 24, 2008, 12:01:33 PM12/24/08
to mootool...@googlegroups.com
I'm changing my API so that the order of the arguments will match what Daniel has in place now. I'll be releasing an update today.

The only real difference between Daniel's work and mine is that 

a) his is more robust and will probably work far better
b) mine allows the test to be a selector, an array of elements, or a function (I like this a lot)

-Aaron

Rajeev J Sebastian

unread,
Dec 24, 2008, 12:36:49 PM12/24/08
to mootool...@googlegroups.com

Theres nothing new in this. I think anyone with significant JS code
will be using some or other "delegation" scheme, some with more
features than the implemented referenced above.

Whether it should be integrated into Mootools is of course Mootools
Dev Team's decision, but *personally*, I dont think its very important
to have it in mootools core, and I wouldn't use it either, since its
missing an important piece (for me), i.e., named behaviours that can
be turned off or on.

Regards
Rajeev J Sebastian

nutron

unread,
Dec 24, 2008, 6:56:32 PM12/24/08
to mootool...@googlegroups.com
FYI, I've taken down my delegation plugin for now. Here's a post about why. I'd really appreciate feedback.

horseweapon

unread,
Dec 25, 2008, 2:40:09 AM12/25/08
to MooTools Users
I use event delegation a lot, because of fully ajaxified websites, and
I think it's awsome it gets implemeted in the mootool's core. I kinda
liked Aaron version better than Daniels, but ... I guess it's just
personal taste. One question though : will it be possible to remove
event delegations like you remove events?

Guillermo Rauch

unread,
Dec 25, 2008, 2:46:06 AM12/25/08
to mootool...@googlegroups.com
API wise, I don't like Aaron's approach very much. I think it's counterintuitive, specially when it comes to the .set() syntax.
What about addMatchEvent / removeMatchEvent ?
--
Guillermo Rauch
http://devthought.com

electronbender

unread,
Dec 26, 2008, 8:21:08 AM12/26/08
to MooTools Users
Aaron,

The link for the pointy tooltip demo does not exist:
http://www.clientcide.com/code-releases/loads-of-new-plugins-pointytips-formvalidatortips-eventdelegation-and-more/
Click the demo link, and you get a does not exist page...

On Dec 25, 12:56 am, nutron <anut...@gmail.com> wrote:
> FYI, I've taken down my delegation plugin for now. Here's a post about why.
> I'd really appreciate feedback.http://www.clientcide.com/code-releases/thoughts-on-element-delegation/
>
> On Wed, Dec 24, 2008 at 9:37 AM, Rajeev J Sebastian (via Nabble) <
> ml-user+56427-672013...@n2.nabble.com<ml-user%2B56427-672013...@n2.nabble.com>
>
>
>
> > wrote:
>
> > On Wed, Dec 24, 2008 at 9:09 PM, Michelle Steigerwalt
> > <msteigerwalt@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1775462&i=0>>
> > wrote:
>
> > > Hey Aaron,
>
> > >    We've actually already written the event delegation code for 1.3.
> > > Right now, we're working on the specifics of integrating it into
> > > MooTools.
>
> > >    Daniel Steigerwald has been doing some pretty amazing work on this
> > > feature for quite some time now.  You can see his demo here:
> > >http://daniel.steigerwald.cz/demos/delegated/default.htm.  We've been
> > > tweaking the API a bit, but that code is pretty close to what's going
> > > to go into MooTools.
>
> > >    Unfortunately, the syntaxes are very different, so people using
> > > the Clientcide version of event delegation are either going to have to
> > > rewrite those portions of their applications for the next version of
> > > MooTools or commit to using a third-party plugin.
>
> > Theres nothing new in this. I think anyone with significant JS code
> > will be using some or other "delegation" scheme, some with more
> > features than the implemented referenced above.
>
> > Whether it should be integrated into Mootools is of course Mootools
> > Dev Team's decision, but *personally*, I dont think its very important
> > to have it in mootools core, and I wouldn't use it either, since its
> > missing an important piece (for me), i.e., named behaviours that can
> > be turned off or on.
>
> > Regards
> > Rajeev J Sebastian
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> Clientcide:  http://www.clientcide.comwww.clientcide.com
> --
> View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...

electronbender

unread,
Dec 26, 2008, 8:22:10 AM12/26/08
to MooTools Users
Btw, in Chrome, i get the tooltop on the LEFT side of the box, while
firefox displays it on the right (which is the way it's supposed to
be?).

On Dec 25, 12:56 am, nutron <anut...@gmail.com> wrote:
> FYI, I've taken down my delegation plugin for now. Here's a post about why.
> I'd really appreciate feedback.http://www.clientcide.com/code-releases/thoughts-on-element-delegation/
>
> On Wed, Dec 24, 2008 at 9:37 AM, Rajeev J Sebastian (via Nabble) <
> ml-user+56427-672013...@n2.nabble.com<ml-user%2B56427-672013...@n2.nabble.com>
>
>
>
> > wrote:
>
> > On Wed, Dec 24, 2008 at 9:09 PM, Michelle Steigerwalt
> > <msteigerwalt@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1775462&i=0>>
> > wrote:
>
> > > Hey Aaron,
>
> > >    We've actually already written the event delegation code for 1.3.
> > > Right now, we're working on the specifics of integrating it into
> > > MooTools.
>
> > >    Daniel Steigerwald has been doing some pretty amazing work on this
> > > feature for quite some time now.  You can see his demo here:
> > >http://daniel.steigerwald.cz/demos/delegated/default.htm.  We've been
> > > tweaking the API a bit, but that code is pretty close to what's going
> > > to go into MooTools.
>
> > >    Unfortunately, the syntaxes are very different, so people using
> > > the Clientcide version of event delegation are either going to have to
> > > rewrite those portions of their applications for the next version of
> > > MooTools or commit to using a third-party plugin.
>
> > Theres nothing new in this. I think anyone with significant JS code
> > will be using some or other "delegation" scheme, some with more
> > features than the implemented referenced above.
>
> > Whether it should be integrated into Mootools is of course Mootools
> > Dev Team's decision, but *personally*, I dont think its very important
> > to have it in mootools core, and I wouldn't use it either, since its
> > missing an important piece (for me), i.e., named behaviours that can
> > be turned off or on.
>
> > Regards
> > Rajeev J Sebastian
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> Clientcide:  http://www.clientcide.comwww.clientcide.com
> --
> View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...

electronbender

unread,
Dec 26, 2008, 8:24:14 AM12/26/08
to MooTools Users
My bad, it's the delegate demo link that doesnt work:
http://www.clientcide.com/wiki/cnet-libraries/04-element/0.1-element.delegate


On Dec 26, 2:21 pm, electronbender <ognen.plavev...@gmail.com> wrote:
> Aaron,
>
> The link for the pointy tooltip demo does not exist:http://www.clientcide.com/code-releases/loads-of-new-plugins-pointyti...

nutron

unread,
Dec 26, 2008, 2:37:11 PM12/26/08
to mootool...@googlegroups.com
It's supposed to be on the right. I haven't tested it in Google Chrome...

On Fri, Dec 26, 2008 at 5:22 AM, electronbender (via Nabble) <ml-user%2B55942-1381446172@...> wrote:

Btw, in Chrome, i get the tooltop on the LEFT side of the box, while
firefox displays it on the right (which is the way it's supposed to
be?).

On Dec 25, 12:56 am, nutron <anut...@...> wrote:

> FYI, I've taken down my delegation plugin for now. Here's a post about why.
> I'd really appreciate feedback.http://www.clientcide.com/code-releases/thoughts-on-element-delegation/
>
> On Wed, Dec 24, 2008 at 9:37 AM, Rajeev J Sebastian (via Nabble) <
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> Clientcide:  http://www.clientcide.comwww.clientcide.com
> --
> View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> Sent from the MooTools Users mailing list archive at Nabble.com.

nutron

unread,
Dec 26, 2008, 2:37:41 PM12/26/08
to mootool...@googlegroups.com
As I posted yesterday, this plugin has been removed for the time being:

On Fri, Dec 26, 2008 at 5:24 AM, electronbender (via Nabble) <ml-user%2B55942-1381446172@...> wrote:

My bad, it's the delegate demo link that doesnt work:
http://www.clientcide.com/wiki/cnet-libraries/04-element/0.1-element.delegate



On Dec 26, 2:21 pm, electronbender <ognen.plavev...@...> wrote:

> Aaron,
>
> The link for the pointy tooltip demo does not exist:http://www.clientcide.com/code-releases/loads-of-new-plugins-pointyti...
> Click the demo link, and you get a does not exist page...
>
> On Dec 25, 12:56 am, nutron <anut...@...> wrote:
>
> > FYI, I've taken down my delegation plugin for now. Here's a post about why.
> > I'd really appreciate feedback.http://www.clientcide.com/code-releases/thoughts-on-element-delegation/
>

> > On Wed, Dec 24, 2008 at 9:37 AM, Rajeev J Sebastian (via Nabble) <
> > > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> > -----
> > The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> > Clientcide:  http://www.clientcide.comwww.clientcide.com
> > --
> > View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> > Sent from the MooTools Users mailing list archive at Nabble.com.

nutron

unread,
Dec 26, 2008, 2:39:41 PM12/26/08
to mootool...@googlegroups.com
As I posted yesterday, this plugin has been removed for the time being:

On Fri, Dec 26, 2008 at 5:24 AM, electronbender (via Nabble) <ml-user%2B55942-1381446172@...> wrote:

My bad, it's the delegate demo link that doesnt work:
http://www.clientcide.com/wiki/cnet-libraries/04-element/0.1-element.delegate



On Dec 26, 2:21 pm, electronbender <ognen.plavev...@...> wrote:

> Aaron,
>
> The link for the pointy tooltip demo does not exist:http://www.clientcide.com/code-releases/loads-of-new-plugins-pointyti...
> Click the demo link, and you get a does not exist page...
>
> On Dec 25, 12:56 am, nutron <anut...@...> wrote:
>
> > FYI, I've taken down my delegation plugin for now. Here's a post about why.
> > I'd really appreciate feedback.http://www.clientcide.com/code-releases/thoughts-on-element-delegation/
>

> > On Wed, Dec 24, 2008 at 9:37 AM, Rajeev J Sebastian (via Nabble) <
> > > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> > -----
> > The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> > Clientcide:  http://www.clientcide.comwww.clientcide.com
> > --
> > View this message in context:http://n2.nabble.com/New-Clientcide-plugins%3A-pointy-things%2C-event...
> > Sent from the MooTools Users mailing list archive at Nabble.com.
Reply all
Reply to author
Forward
0 new messages