Есть ли способ применить обработчик события к переменной, или это нужно делать со скрытыми вводами и тому подобное? У меня установлена переменная:
var c = document.getElementById('myCanvas');
c.myVar = 17;
И я бы хотел настроить для него обработчик событий, если он когда-либо изменится, сохранив лишний скрытый ввод, который будет создан и изменен, и просто упростит мой код.
Благодарю!
Если вы хотите связать изменение атрибута элемента DOM, вы, вероятно, захотите посмотреть события DOM Mutation. Это похоже на излишний, но я бы просто обернул все обращения к этому атрибуту в функции, а затем вызовет все, что мне нравится, из этой функции. Вы просто убедитесь, что всегда используете эту функцию для доступа к атрибуту.
Чтобы проиллюстрировать, что вы хотите, вы можете определить геттеры и сеттеры свойств объекта с вызовом требуемой функции:
HTML:
<canvas id="myCanvas" class="border"></canvas>
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);
CSS:
canvas.border {
border-style: solid;
border-color: 0;
}
ПРИМЕЧАНИЕ. Вышеприведенное решение используется для иллюстрации точки для ответа на конкретный вопрос. Он не очень хорошо решает проблему для объекта самодвижения. Это потому, что я называю краску из двух мест (всякий раз, когда x или y меняются). Если вы всегда меняете x и y, вы делаете дважды картину. Лучше всего изменить x, изменить y и любые другие изменения состояния, необходимые, затем вызвать метод рисования на объекте, чтобы он рисовал сам.
Это действительно помогает проиллюстрировать проблему с этим типом модели, поэтому у нее есть ценность при показе ловушки, с которой можно попасть, когда делаете так. Поэтому я оставил код как есть с этой запиской.
Я сделал новую версию этого, которая показывает, что я считаю лучшим способом сделать это в следующем коде. Изменен только JavaScript:
JavaScript:
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);