Multiple events for the same action/code

[Mushr00m]

Hi (again) !

I've a general question about events. Sometimes I have to put the multiple events on a same element, like "focus" and "blur". So I have to repeat twice the same code just for 2 different events like :
$('myElement').addEvents({
    focus: function(){
        Do my action
    },
    blur: function(){
        Do my action (the same)
    }
});

Is there a way to simplify this to have both events doing the same code ? (I search and found nothing with mootools to do this, I think JQuery does and called it Binding events)

Thanks

[Dimitar Christoff]

well. you can use either something like save a reference:

    var cb = function(){ ... do stuff }

    element.addEvents({

       focus: cb,

       blur: cb
    });

... or, you can refactor addEvents to be more like the jQuery one. 

    (function(){
        var oldAddEvent = Element.prototype.addEvent,
            newAddEvent = function(type, fn){
                var self = this;
                type = type.split(/\s+/);
               
                type.each(function(type){
                    oldAddEvent.call(self, type, fn);
                });
                return this;
            };
       
        Element.implement({
            addEvent: newAddEvent,
            addEvents: newAddEvent.overloadSetter()
        });
    }());
       
    document.getElement('input').addEvent('focus blur', function(){
        console.log('focus or blur');
    });

    document.getElement('input').addEvents({
        'mouseenter mouseleave change': function(){
            console.log('mousenter/leave or change');
        }
    });

The trouble with this is old IE and elements that have already been extended by mootools (by copying the methods from the `Element.prototype` on the element objects directly - via `document.id` or the Element constructor - so if you do it, do it before you access any DOM or make elements.

Then, you'd have to do the Class events. If you want, you can use something like the Epitome.Events for Class - with `.on` (same multiple api) / `.off` / `.trigger` but also `listenTo` and `stopListening` like in Backbone, amongst other things.

--
 
---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"
@D_mitar - https://github.com/DimitarChristoff

[Dimitar Christoff]

oh. the Epitome.Events source is here. https://github.com/DimitarChristoff/Epitome/blob/master/src/epitome-events.js

[Mushr00m]

Ok so it confirm what I thought there is no "built-in" easy way except doing a function and calling it with the two events.

Thanks

[Dimitar Christoff]

On Thursday, May 2, 2013 12:03:39 AM UTC+1, Mushr00m wrote:

Ok so it confirm what I thought there is no "built-in" easy way except doing a function and calling it with the two events.

 
That is correct, you cannot stack multiple events to the same callback in a single statement like in jQuery or Backbone that is built-in.

[Mushr00m]

Maybe one of the quickest topic resolved here ;-)
Thanks

[Sanford Whiteman]

I've been known to do it like this:

var reusecb;
document.id( 'myInput' ).addEvents ({
blur: reusecb = function(e){ alert( 'event: '+e.type ); }
, mouseout: reusecb
});

Obvs. it's also just saving the reference to the function obj but
helps me see the function definition as an event listener.

-- S.

[Rolf Langenhuijzen]

++

I have done this as well, but only because I was acting like Speedy Gonzales and needed a quick 'n dirty fix. hehehe

Normally I would just define the method and reference to it twice..

[Rolf Langenhuijzen]

oh yes, take a look at Delegator part of Behavior: https://github.com/anutron/behavior

nice!

From the docs:

Included in the library is also a file called Delegator which is essentially the same thing except for events. For example, let's say you have a predictable UI pattern of having a link that, when clicked, it hides a parent element. Rather than writing that code each time:

document.body.addEvent("click:a.hideParent", function(e, link){
  e.preventDefault();
  link.getParent().hide();
});

You register this pattern with Delegator and now you just do:

<a data-trigger="hideParent" data-hideparent-options ="{'target': '.someSelector'}">Hide Me!</a>

sweet.