이미지 롤오버 객체 - javascript

Question

다음은 이미지 롤오버를 만드는 데 사용할 수있는 간단한 코드입니다 (자습서에서 가져옴). 작성자의 말 : 첨부 이벤트 핸들러 부분 아래의 생성자는 여기에 두 개의 이벤트 핸들러를 만듭니다. 이러한 이벤트 핸들러 내에서 "that"이라는 변수는 롤오버 객체를 참조하는 데 사용해야합니다. 이는 이벤트 처리기 내의 "this"키워드가 롤오버 객체가 아니라 이미지 객체를 참조하기 때문입니다.

내 질문은 : this.image은 이미지 개체를 참조하지만 this.image.src을 this.newImageURL과 동일하게 설정한다는 것을 알고 있습니까? 나는 왜 that이 필요한지 이해하지 못한다고 생각합니다. src 속성을 that.image으로 변경하면 결국 'this.image?'의 src 속성이 변경됩니다.

var $ = function (id) { return document.getElementById(id); } 

var Rollover = function (imageId, newImageURL) { 
    var that = this; 
    this.newImageURL = newImageURL; 
    this.image = $(imageId); 

    // Validate node 
    if (! this.image) { 
     throw new Error("Rollover: Image ID not found."); 
    } 
    if (this.image.nodeType !== 1 || this.image.nodeName !== "IMG") { 
     throw new Error("Rollover: Image ID is not an img tag."); 
    } 

    var newObj = that; 
    // Copy original image url 
    this.oldImageURL = this.image.src; 

    // Attach event handlers 
    this.image.onmouseover = function() { 
     that.image.src = that.newImageURL; 
    } 
    this.image.onmouseout = function() { 
     that.image.src = that.oldImageURL; 
    } 
} 

Answer 1

자바 스크립트에서 이 범위와 함께 변수가 변경됩니다. var that = this;의 첫 번째 줄이은 롤오버 개체를 나타냅니다. 설정 =이 기본적으로 그냥 롤오버에 대한 포인터를 만듭니다. 이 지금 롤오버되었던 객체를 포인트 - 후속 이벤트 호출

이 지금 이벤트 범위를 의미 콜백 함수에서

this.image.onmouseover = function() { 
    that.image.src = that.newImageURL; 
} 

있다. 그 이유는 this.image가 가리 키지 않는 이유는 DOM 요소에 마우스를 올려 놓기 때문에 이미지 속성이 없기 때문입니다. 롤오버 인스턴스 (원래 이)에 이미 다른 변수 (즉)를 설정 했으므로 다른 모든 범위에서 사용할 수 있습니다.

Answer 2

이는 생성자가 생성 될 당시 인스턴스화 된 객체의 인스턴스를 참조합니다. 이것이 중요한 이유입니다. clr은 어떤 객체를 호출해야할지 모릅니다. 와. (내 첫 번째 대답은 친절하십시오.))

Answer 3

더 이상 롤오버 용으로 자바 스크립트를 사용해야합니다.

시도해보기 CSS : hover! http://tinkerbin.com/ze1Y32ZP