Javascript 将事件处理程序应用于变量

是否有一种方法可以将事件处理程序应用于变量，或者是否需要使用隐藏的输入等来完成？我已经设置了一个变量：

var c = document.getElementById('myCanvas');
c.myVar = 17;

我想为它设置一个事件处理程序，以防它发生变化，保存正在创建和更改的多余的隐藏输入，并简化我的代码

---

谢谢

如果希望钩住DOM元素属性中的更改，可能需要查看。这感觉有点过头了——我只是将对该属性的所有访问封装在一个函数中，然后从该函数中调用我喜欢的任何东西。您只需确保始终使用该函数访问属性。

为了说明您想要什么，您可以通过调用所需函数在对象属性上定义getter和setter：

HTML:

注：上述解决方案用于说明回答特定问题的要点。它不能很好地解决对自绘制对象的需求。这是因为我从两个位置调用paint（每当x或y发生变化时）。如果你总是改变x和y，你会画两次。更好的方法是更改x、y和任何其他所需的状态更改，然后调用对象上的绘制方法，使其绘制自身

这确实很好地说明了这类模型的问题，因此它有助于显示这样做时可能遇到的陷阱。因此，我将代码保留在本说明中

我已经做了一个新版本，在下面的代码中展示了我认为更好的方法。只有JavaScript已更改：

JavaScript:

var x = 0,
    y = 0,
    c = document.getElementById('myCanvas'),
    ctx = c.getContext('2d'),
    WIDTH = c.width,
    HEIGHT = c.height,
    paint = function () {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        ctx.beginPath();
        ctx.rect(x, y, 6, 6);
        ctx.closePath();
        ctx.fill();
    };

Object.defineProperty(c, 'x', {
    get: function () {
        return x;
    },
    set: function (value) {
        x = value;
        paint();
    }
});

Object.defineProperty(c, 'y', {
    get: function () {
        return y;
    },
    set: function (value) {
        y = value;
        paint();
    }
});

window.setInterval(function () {
    var dx = Math.round(Math.random() * 6) - 3,
        dy = Math.round(Math.random() * 6) - 3;

    if (c.x + dx > 0 && c.x + dx < c.width) {
        c.x += dx;
    }

    if (c.y + dy > 0 && c.y + dy < c.height) {
        c.y += dy;
    }
}, 20);

function DrunkBox(x, y) {
    'use strict';

    var c = document.getElementById('myCanvas'),
        ctx = c.getContext('2d');

    this.width = c.width;
    this.height = c.height;

    this.x = x,
    this.y = y;

    this.paint = function () {
        ctx.clearRect(0, 0, this.width, this.height);
        ctx.beginPath();
        ctx.rect(this.x, this.y, 6, 6);
        ctx.closePath();
        ctx.fill();
    };
}

var db = new DrunkBox(50, 30);

window.setInterval(function () {
    var dx = Math.round(Math.random() * 6) - 3,
        dy = Math.round(Math.random() * 6) - 3;

    if (db.x + dx > 0 && db.x + dx < db.width) {
        db.x += dx;
    }

    if (db.y + dy > 0 && db.y + dy < db.height) {
        db.y += dy;
    }
    db.paint();
}, 20);

功能盒（x，y）{
"严格使用",；
var c=document.getElementById（'myCanvas'），
ctx=c.getContext（'2d'）；
此宽度=c宽度；
此高度=c高度；
这个，x=x，
这个。y=y；
this.paint=函数（）{
ctx.clearRect（0，0，this.width，this.height）；
ctx.beginPath（）；
ctx.rect（this.x，this.y，6,6）；
ctx.closePath（）；
ctx.fill（）；
};
}
var db=新接线盒（50,30）；
window.setInterval（函数（）{
var dx=Math.round（Math.random（）*6）-3，
dy=Math.round（Math.random（）*6）-3；
if（db.x+dx>0&&db.x+dx0&&db.y+dy

---

我不知道这件事。。事件类型是什么样的？

canvas.border {
    border-style: solid;
    border-color: 0;
}

function DrunkBox(x, y) {
    'use strict';

    var c = document.getElementById('myCanvas'),
        ctx = c.getContext('2d');

    this.width = c.width;
    this.height = c.height;

    this.x = x,
    this.y = y;

    this.paint = function () {
        ctx.clearRect(0, 0, this.width, this.height);
        ctx.beginPath();
        ctx.rect(this.x, this.y, 6, 6);
        ctx.closePath();
        ctx.fill();
    };
}

var db = new DrunkBox(50, 30);

window.setInterval(function () {
    var dx = Math.round(Math.random() * 6) - 3,
        dy = Math.round(Math.random() * 6) - 3;

    if (db.x + dx > 0 && db.x + dx < db.width) {
        db.x += dx;
    }

    if (db.y + dy > 0 && db.y + dy < db.height) {
        db.y += dy;
    }
    db.paint();
}, 20);