Question

Maybe I’m totally missing something about even handling in jQuery, but here’s my problem.

Let’s assume there are some event binding, like

$(element).bind("mousemove", somefunc);

Now, I’d like to introduce a new mousemove binding that doesn’t override the previous one, but temporarily exclude (unbind) it. In other words, when I bind my function, I must be sure that no other functions will ever execute for that event, until I restore them.

I’m looking for something like:

$(element).bind("mousemove", somefunc);
// Somefunc is used regularly
var savedBinding = $(element).getCurrentBinding("mousemove");
$(element).unbind("mousemove").bind("mousemove", myfunc);
// Use myfunc instead
$(element).unbind("mousemove", myfunc).bind("mousemove", savedBindings);

Of course, the somefunc is not under my control, or this would be useless 🙂

Is my understanding that is possible to bind multiple functions to the same event, and that the execution of those functions can’t be pre-determined.
I’m aware of stopping event propagation and immediate event propagation, but I’m thinking that they are useless in my case, as the execution order can’t be determined (but maybe I’m getting these wrong).

How can I do that?

EDIT: I need to highlight this: I need that the previously installed handler (somefunc) isn’t executed. I am NOT defining that handler, it may be or may be not present, but its installed by a third-party user.

EDIT2: Ok, this is not feasible right now, I think I’m needing the eventListenerList, which is not implemented in most browsers yet. http://www.w3.org/TR/2002/WD-DOM-Level-3-Events-20020208/changes.html

Answer 1

Another way could be to use custom events, something along these lines:

var flag = 0;
$(element).bind("mousemove", function() {
    if(flag) {
        $(this).trigger("supermousemove");
    } else {
        $(this).trigger("magicmousemove");
    }
}).bind("supermousemove", function() {
    // do something super
}).bind("magicmousemove", function() {
    // do something magical
}); 

$("#foo").click(function() {
    flag = flag == 1 ? 0 : 1; // simple switch
});

Highly annoying demo here: http://jsfiddle.net/SkFvW/