Comments on: Event Delegation, take 2

By: Aaron N.

Aaron N. — Sat, 18 Apr 2009 04:13:20 +0000

I have stopped working on this plugin as MooTools 2.0 will contain this functionality. Anyone using this version will need to convert their selectors (the syntax is different in M2.0) when they upgrade. That’s why it’s still “beta” here.

By: JTR

JTR — Sat, 18 Apr 2009 03:19:24 +0000

Aaron, have you progressed any further with the custom event handling? i.e. mouseenter/mouseleave.

I happen to use those events and noticed that they don’t work using thi plugin – as you’ve highlighted.

It wont stop me doing what I want to do as I will just leave the old code in there – but it would be a nice to have.

By: Aaron N.

Aaron N. — Fri, 17 Apr 2009 17:08:15 +0000

Nice work JTR. You’ve definitely got the idea. Note that MooTools 2.0 is coming along and aiming for a summer release and the delegation system in it does indeed have a different format. I strongly suggest leaving some sort of note in a comment in your code whenever you use this so you can find it and switch it out later (as it’s not something you can easily search for). The basic mechanism will remain the same, but the syntax of the selector has changed.

By: JTR

JTR — Fri, 17 Apr 2009 16:59:25 +0000

Aaron,
In regard to post 20 (above), I have found that the error occurs when you use element.removeEvents();

removeEvents works when you specify the event, such as element.removeEvents(‘click’); but if you want to remove ALL events the error appears.

By: JTR

JTR — Fri, 17 Apr 2009 16:08:39 +0000

Great plugin!

Im writing a multi-resource calendar system (that utilizes Mootools 1.2) for a client. I use the ContextMenu class to give the user a right-click menu. Using the standard ContextMenu code it associates a function to the ‘contextmenu’ event. The event is added to each element that you specify (it uses $$(element) to achieve this).

In my code I am using a table to display my calendar and the table can contain upto 2000 cells which I need to assign the event to. After getting everything to work.. I then stumbled across this plugin.

I have modified the ContextMenu class to use delegation. My parent element becomes the table and the children are the cells (td). My event assignment time has gone from 1 second to instant – as I now add 1 event to the table and not to ~2000 cells. I know it doesnt sound like a great improvement but the 1 second delay was noticable.

BTW: The element where the event occurs is obtained by grabbing the events target, for example:

parent.addEvent(‘click(td)’, function(e) {
targetEl = e.target;
targetEl.setStyle(‘background-color’, ‘#CCCCCC’);
});

Thanks again! I hope to see delegation in Mootools 1.3

By: jQuery implineste 3 ani si lanseaza versiunea 1.3 | Interfete Web

jQuery implineste 3 ani si lanseaza versiunea 1.3 | Interfete Web — Mon, 19 Jan 2009 10:52:25 +0000

[...] Personal, nu am avut timp sa incerc practic ce aduce nou aceasta versiune, insa am aruncat o privire pe pagina in care este anuntata oficial noua versiune, si pot spune ca mi s-au parut interesante castigurile de performanta datorate motorului de selectori Sizzle (daca aruncati o privire pe graficele din articol o sa vedeti ca sunt cu adevarat semnificative in cazul Internet Explorer 6/7, pentru restul browserelor diferentele de performanta fiind destul de mici), si noile evenimente “live” (utile in special in cazul in care se creaza elemente DOM dupa ce s-a incarcat pagina, elemente la care e nevoie sa atasam ascultatori – chiar exista astfel de pagini, luati ca exemplu activitatea lui Robert Scoble si a prietenilor sai contactelor sale de pe Friendfeed, vazuta in timp real) realizate cu ajutorul delegarii de evenimente (ca o paranteza, si viitoarea versiune de MooTools va avea parte de asa ceva). [...]

By: Aaron N.

Aaron N. — Tue, 13 Jan 2009 16:26:44 +0000

Hmmm. In what context? Is this on the demo page? Can you post a url that I can look at?

By: emailtoid.net/i/ac6706df/

emailtoid.net/i/ac6706df/ — Tue, 13 Jan 2009 14:56:14 +0000

Am I missing something? I get this error in the code, I think I need some Module cause this is with MT1.2 complete.

events[type].contains is not a function
[Break on this error] if (!events[type] || (fn && !events[type].contains(fn))) return this;

By: Aaron N.

Aaron N. — Fri, 09 Jan 2009 21:32:18 +0000

Published.

Regarding custom events (like mouseenter) I have an idea how to do this so that not only will mouseenter/mouseleave work but so that people can write their own custom rules for delegation. In the case of mouseenter/leave the wrapper function has to check that the target == the selector, and not look for children. Other custom events might have different rules. I’ll try and tackle shortly.

By: Jens Anders Bakke

Jens Anders Bakke — Fri, 09 Jan 2009 20:43:11 +0000

Excellent :) Glad I could help make the class work as intended.
Now the only thing left is to get mouseenter and mouseleave to work, and I’ll be truly satisfied :)

btw, I improved the double replace code into one regex replace as well..

selector: type.replace(/^.*?$(.*)$$/,”$1″)

Example can be found here:
http://webfreak.no/lab/moo/event.delegation/take2.htm