Event Delegation with MooTools

Discussion

1. Chris the Developer

   Event delegation is the shizzle, but I’m not a fan of how it’s done in MooTools. It’s great that it’s in there, but I feel that the functionality should be contained in its own method.

   I get that both assign events to the same element, but click:relay(selector) is not the most intuitive approach. I’m more for passing an object literal with the selector as key and the method as value, kind of like addEvents()…
2. David Walsh

   @Chris the Developer: Fair enough — let me know if you decide to create your own version. Our ears are always open! Thanks!
3. EmEhRKay

   I forgot all about this being added. Great stuff. Now when I pull html back from a request and I need to add events to it, no need to do collection.removeEvent collection.addEvent
4. Chris the Developer

   Element.implement({
   	delegateEvent: function(type, rules, prevent, propagate){
   		return this.addEvent(type, function(e) {
   			var event = new Event(e);
   			var target = document.id(event.target);
   			var prevent = prevent || false;
   			var propagate = propagate || true; 
   
   			for (var selector in rules) {
   				if (target.match(selector)) {
   					if (prevent) event.preventDefault();
   					if (!propagate) event.stopPropagation();
   					if (rules[selector].apply) return rules[selector].apply(target, $A(arguments));
   				}
   			}
   		});
   	}
   });
5. Chris the Developer

   Good grief…some mistakes in that one though. Like the 4 separate var statements and the new Event(e) nonsense…But you get the idea! :)
6. derschreckliche

   Writing a function for this like Chris_the_Developer proposed is IMHO more intuitive and easier to handle.
   I didn’t really got the point with the “:relay” pseudoselector…
7. Chris the Developer

   Also, just to be clear, my approach allows you to delegate different functions for different selector matches, in the same setup:

   document.id('container').delegateEvent('click', {
   '.headings': function() {
   console.log('heading clicked');
   },
   '.intro': function() {
   console.log('intro clicked');
   }
   });
   

   Which means you can have 2 behaviors on 1 event. I don’t see how that’s possible with the relay event…I imagine you would have to add relay twice, which means 2 events for 2 behaviors.
8. Dimitar Christoff

   is this similar to the infamous .live() in jquery? have you also seen this implementation:

   http://www.k1der.net/country/mootools/live-events-demo.html
9. Chris the Developer

   <> .
10. David Walsh

    @Dimitar Christoff: Yes.

    @Chris the Developer: Not bad! I’ll pass this onto the team and see what they have to say!
11. jay

    So… what if you want to do click:relay( ‘a specific element, eg an input button – not a submit btn, but an input btn’ )

    in the above scenario what would ‘x’ be in click:relay(‘x’) ?
12. Chris the Developer

    @jay – click:relay(input[type=button])
13. danicotra

    Hey there!
    I would like to know w(tf)hat if I need to apply it only to some tags inside parent element but only certain, not everyone? (of course every link has a unique id… but suppose links within parent element are about 50…)
14. SamGoody

    Chris’s method is cleaner, more powerful, and more intuitive.
    Much more “moootools”.

    Any reason why it didn’t fly? Delegation is now in the core, at v1.4
15. GarciaWebDev

    And how do you fire that event with fireEvent() ? I can’t get it to work!
16. GarciaWebDev

    Ok, got it:

    
fireEvent('change:relay(element)')


    But I noticed that this now refers to the parent element… How can I get the child element reference inside the callback?
17. GarciaWebDev

    Here’s a StackOverflow: http://stackoverflow.com/questions/8565225/mootools-event-delegation-how-to-reference-child-element-inside-callback/8565640#8565640
18. Jesse Donat

    Your code

    var links = document.id('link-list').getElements('li');
    links.each(function(link) {
      link.addEvent('click',function() {
        //assign actions here
      });
    })
    

    is a little over complicated – it could easily be replaced with

    var links = document.id('link-list').getElements('li');
    links.addEvent('click',function() {
        //assign actions here
    });