이 코드의 의미를 설명하십시오

Question

주소 : http://www.stanford.edu/~ouster/cgi-bin/cs142-spring12/lecture.php?topic=event의 자습서를 살펴 보겠습니다.

그리고 별표로 표시된 행의 코드에 대해 이해할 수 없습니다. document.body.onmousemove 설정

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

는 document.body 요소 mousemove 이벤트를 수신하는 한 (추한) 방법입니다.

따라서 this.oldMoveHandler = document.body.onmousemove;은 단순히 이벤트 처리기 함수에 대한 참조가 있으면 저장합니다.

이벤트 처리기를 연결하려면 element.addEventListener을 사용하는 것이 좋습니다.

Answer 2

코멘트에서 언급했듯이 침입 이벤트 처리의 사용은 매우 오래된 방식이므로 권장되지 않습니다.

그러나 mousedown 이벤트가 mouseup에 및 (표시된 코드의 최초의 4 선) 마우스 오버에 대한 현재의 이벤트 핸들러는 마우스 프레스에 의해 트리거 될 때 코드, 드래그 앤 드롭을 구현하고 귀하의 질문에 대답하기 "저장"되고 드래그 앤 드롭을 수행 할 이벤트 핸들러로 대체됩니다. 드래그 된 요소가있는 경우

은 즉 mouseup에 이벤트가 발생합니다 "떨어졌다"는 MouseMove 이벤트 및 mouseup에 이벤트 핸들러 (표시된 코드의 마지막 2 줄)

를 저장 한 원래의 이벤트 핸들러로 대체됩니다

Answer 3

this.oldMoveHandler 참조의 목적은 개발자가 고통스러운 시간을 보내는 데 방해가되지 않는 모든 동작을 방해하지 않기 위해 페이지의 이전 개발자가 "document.body.onmousemove"에 추가 한 이벤트 핸들러를 저장하는 것입니다. 짓다. 그것은 다음과 같이 진행됩니다

1. 아래로 눌러 마우스로, 우리의 공상 드래그 처리기를 추가, 기존의 핸들러를 저장합니다.

2. 마우스를 움직이면 사랑스러운 동작이 발생합니다.

3. 마우스를 놓으면 드래그 동작이 멈추고 오래된 핸들러가 복원됩니다 (null 인 경우에도).

이것은 나쁜 해결책이지만 이전 코드의 방법을 벗어나지 않는 방법입니다. 가장 선호되는 방법은 야만적 인 IE 브라우저에 addEventListener/removeEventListener 또는 attachEvent/detachEvent를 사용하는 것입니다. 이 함수는 여러 핸들러가 서로 밟지 않고 동일한 이벤트에 가입 할 수 있도록 설계되었습니다. 여기에 몇 가지 좋은 독서가이다 :

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