Question

In source code here
http://www.daftlogic.com/sandbox-javascript-slider-control.htm

There is these instructions:

// safely hook document/window events
if (document.onmousemove != f_sliderMouseMove) {
window.f_savedMouseMove = document.onmousemove;
document.onmousemove = f_sliderMouseMove;
}

I don’t understand what it does and why it would be safer to do that this way, does someone understand?

Answer 1

It might be that some other code already assigned an event handler to document.onmousemove. The problem with this method, as opposed to addEventListener, is that only one function can be assigned to element.onXXXX. Thus, if you blindly assign a new event handler, an already existing one might be overwritten and other code might break.

In such a case, I would write:

if (document.onmousemove) {
    (function() {
         var old_handler = document.onmousemove;
         document.onmousemove = function() {
            old_handler.apply(this, arguments);
            f_sliderMouseMove.apply(this, arguments);
         };
    }());
}
else {
    document.onmousemove = f_sliderMouseMove;
}

This way it is ensured that both event handlers are executed. But I guess that depends on the context of the code. Maybe f_sliderMouseMove calls window.f_savedMouseMove anyway.