Как передать объект в событие? Здравствуйте. Есть класс. В нем идет обработка событий. Как сделать чтоб при срабатывании события можно было нормально работать с классом? Вот такая штука не вариантthis.canvas_object.addEventListener("click", function() { this.click(this); }, false);class Canvas{
click (){ console.log('нажал'); this.ctx.fillStyle = "green"; this.ctx.fillRect(50, 50, 100, 100); // Вот здесь нужны данные объекта // Понятно что this не работает, но нужно как то передать этот объект. Есть варианты? } }
Для того чтобы передать объект в обработчик события, вы можете использовать стрелочную функцию, которая сохраняет контекст выполнения. В вашем случае, вы можете модифицировать код следующим образом:
this.canvas_object.addEventListener("click", () => { this.click() }, false); class Canvas{ constructor(canvas_id) { this.canvas_object = document.getElementById(canvas_id); this.ctx = this.canvas_object.getContext('2d'); this.canvas_object.addEventListener("click", () => { this.click() }, false); // Слушаем события } click (){ console.log('нажал'); this.ctx.fillStyle = "green"; this.ctx.fillRect(50, 50, 100, 100); // Теперь объект доступен через this } }
Теперь при срабатывании события click будет вызываться метод click объекта Canvas, и внутри этого метода вы сможете нормально работать с объектом и его свойствами.
Для того чтобы передать объект в обработчик события, вы можете использовать стрелочную функцию, которая сохраняет контекст выполнения. В вашем случае, вы можете модифицировать код следующим образом:
this.canvas_object.addEventListener("click", () => { this.click() }, false);class Canvas{
constructor(canvas_id) {
this.canvas_object = document.getElementById(canvas_id);
this.ctx = this.canvas_object.getContext('2d');
this.canvas_object.addEventListener("click", () => { this.click() }, false); // Слушаем события
}
click (){
console.log('нажал');
this.ctx.fillStyle = "green";
this.ctx.fillRect(50, 50, 100, 100);
// Теперь объект доступен через this
}
}
Теперь при срабатывании события click будет вызываться метод click объекта Canvas, и внутри этого метода вы сможете нормально работать с объектом и его свойствами.