图像滚动对象-javascript

下面是一段简单的代码，可以用来创建我正在学习的教程中的图像翻转。作者说：在附加事件处理程序部分下，构造函数在这里创建两个事件处理程序。在这些事件处理程序中，必须使用名为的变量来引用滚动对象。这是因为事件处理程序中的this关键字引用的是图像对象，而不是滚动对象

我的问题是：我知道this.image指的是image对象，但您不想将this.image.src设置为this.newImageURL吗？我想我只是不明白为什么这是必要的。那么，更改that.image的src属性最终如何更改'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;
    }
}

---

这是指在创建构造函数时实例化的对象的实例。 这就是为什么它很重要——或者clr不知道调用什么对象？具有

---

这是我的第一个答案，请友善

您不应该再使用javascript进行滚动

试试CSS：悬停

在javascript中，此变量随作用域的变化而变化。var的第一行=此；这是指滚动对象。设置that=这基本上只是创建一个指向滚动的指针

在任何后续事件中，如

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

在函数回调中，它现在指的是事件作用域——它现在指的是已滚动的对象。这就是为什么this.image不会指向任何东西的原因，因为鼠标移动到的DOM元素没有image属性。因为您已经将另一个变量设置为原来的滚动实例，所以现在可以在任何其他作用域中使用它。

之所以使用该变量，是因为在this.image.onmouseover/out中，它指的是image元素，而不是由滚动构造的对象