This project is archived and is in readonly mode.

#55 ✓duplicate
Thomas Aylott

Event Delegation method for Element

Reported by Thomas Aylott | May 28th, 2008 @ 10:05 AM | in 2.0 (closed)

Originally posted on Trac by Devign

Original Trac Ticket


I wrote a simple function for delegating events to all children of an element.

It gets a string selector or a predicate function that gets current checked child element and returns boolean.

The idea is relying on event bubbling and when event happens on a parent element, the event object still contains the actual element the event was fired from (in .target).

It surly needs some improvements, such as supporting undelegating events, or passing more than one event on same selector (like addEvent and addEvents) and I'll be glad to do these if it gets to mootools base.

	Event delegation - instead of attaching events to new elements, attach to parent and use bubbling to fire children events



	$("list").delegateEvent("click","li",function(e) { this==li },false,true);
	// or
	$("list").delegateEvent("click",function (el) { return Element.get(el,'tag')=="li"; },function(e) { this==li },false,true);
	delegateEvent:function (type,selector,fn,preventDefault,stopPropagation) {
		var check=$type(selector)=="function" ? selector : function (target) { return Element.match(target,selector) };
		return this.addEvent(type,function (e) {
			while (target!=document.body) {
				if (check(target)) {
					if (preventDefault) e.preventDefault();
					if (stopPropagation) e.stopPropagation();
					return fn.apply($(target),[e]);

Trac Attachments

Trac Comments

Changed 2 months ago by Devign

                  Changed 2 months ago by Devign

              changed from trivial to major

              changed from trivial to major

Comments and changes to this ticket

  • csuwldcat

    csuwldcat September 1st, 2008 @ 06:29 PM

    • Tag set to core, enhancement, major

    Please for the love of all that is holy add this Thomas! I would love to have simple event delegation in the core (even though we have written our own). It just makes sense due to the fact that it is insanely faster that setting events on all a target's children and it is much more elegant!

    Add this to the 1.21 bug fix release? (Fingers crossed!)

  • Tom Occhino

    Tom Occhino September 1st, 2008 @ 07:15 PM

    • State changed from “new” to “open”
    • Assigned user changed from “Valerio” to “Tom Occhino”
    • Tag changed from core, enhancement, major to core, enhancement

    it's easy to extend the MooTools core, like you have with your delegateEvent solution, so that should work for now.

    I will open this technique as an enhancement for 1.3, but it won't likely make it into 1.2.1 since it needs to be added properly and not rushed..

  • csuwldcat

    csuwldcat September 1st, 2008 @ 07:48 PM

    Thanks for the consideration on this, I believe that this feature would become widely used almost instantly.

  • Jan Kassens

    Jan Kassens November 21st, 2009 @ 02:53 PM

    • Assigned user cleared.
    • State changed from “open” to “duplicate”
    • Tag cleared.

    implemented and kind of duplicate of #789

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins