请解释这段代码的含义

Question

I'm going through the tutorial at the address: http://www.stanford.edu/~ouster/cgi-bin/cs142-spring12/lecture.php?topic=event .

And I don't understand about code at the lines that I have marked with asterisks.

function Dragger(id) {
    this.isMouseDown = false;
    this.element = document.getElementById(id);
    var obj = this;
    this.element.onmousedown = function(event) {
        obj.mouseDown(event);
    }
}

Dragger.prototype.mouseDown = function(event) {
    var obj = this;
    this.oldMoveHandler = document.body.onmousemove;  /******/
    document.body.onmousemove = function(event) {     /******/
        obj.mouseMove(event);
    }
    this.oldUpHandler = document.body.onmouseup;      /******/
    document.body.onmouseup = function(event) {       /******/
        obj.mouseUp(event);
    }
    this.oldX = event.clientX;
    this.oldY = event.clientY;
    this.isMouseDown = true;
}

Dragger.prototype.mouseMove = function(event) {
    if (!this.isMouseDown) {
        return;
    }
    this.element.style.left = (this.element.offsetLeft
            + (event.clientX - this.oldX)) + "px";
    this.element.style.top = (this.element.offsetTop
            + (event.clientY - this.oldY)) + "px";
    this.oldX = event.clientX;
    this.oldY = event.clientY;
}

Dragger.prototype.mouseUp = function(event) {
    this.isMouseDown = false;
    document.body.onmousemove = this.oldMoveHandler;   /******/
    document.body.onmouseup = this.oldUpHandler;       /******/
}

Answer 1

The purpose of the this.oldMoveHandler references are to store whatever event handlers a previous developer of the page may have added to "document.body.onmousemove", with the goal of not interrupting whatever behavior that developer no doubt spend painful hours to build. It goes like this:

1. Press down with the mouse, store the old handler, add our fancy dragging handler.

2. Move the mouse, lovely dragging behavior occurs.

3. Release the mouse, dragging behavior stops, restore old handler (even if it's null).

This is a way to stay out of the way of previous code, although it's a bad solution. The much preferred way is to use addEventListener/removeEventListener or attachEvent/detachEvent for barbaric IE browsers. These functions are designed so that multiple handlers can subscribe to the same event without stepping on each other. Here's some good reading:

http://www.quirksmode.org/js/introevents.html

Answer 2

Setting document.body.onmousemove is one (ugly) way to listen for mousemove events on the document.body element.

Therefore, this.oldMoveHandler = document.body.onmousemove; is simply storing a reference to the event handler function, if any.

Please note that using element.addEventListener is preferred for attaching event handlers.

Answer 3

As noted in the comments the use of intrusive event handling is very old fashioned and not recommended now.

However to answer your question the code is implementing drag and drop, when the mousedown event is triggered by a mouse press the current event handlers for mouseup and mouseover (first 4 lines of marked code) are "saved" and replaced by the event handlers that will perform the drag and drop.

When the dragged element is "dropped" ie the mouseup event fires, the mousemove and mouseup event handlers are replaced with the original event handlers that were saved (last 2 lines of marked code)