Проблема с вызовом this.

[Siend]

Не могу получить this объекта, на который навешан обработчик событий.

var CanvasControl = new Class();
        CanvasControl.extend({
            init: function (canvas_element) {
                this.canvas = canvas_element;
                this.canvas.onmousemove = this.myMove;
                console.log(this) //ВЫВОД № 1
            }
        });
        CanvasControl.include({          
            myMove: function (e) {
                this.xMouse = e.pageX
                this.yMouse = e.pageY
                console.log(this) //ВЫВОД № 2 
            }
        });

var can1 = new CanvasControl(document.getElementById("canvasA"));

ВЫВОД № 1: _class {canvas: canvas#canvasA, ctx: CanvasRenderingContext2D, WIDTH: 1920, HEIGHT: 602, ClearStyle: function…}
ВЫВОД № 2: <canvas id=​"canvasA" width=​"300" height=​"150">​

Мне же нужно в myMove: function (e) получить ссылку на _class (т.е. тот же объект что в выводе №1)

[Siend]

Упрощу задачу.

XXX.onmousemove = this.myMove;
myMove: function (e) {
                console.log(this) // получу не свой объект XXX на который навешен onmousemove, а элемент html canvas
            }

[danik.js]

Вариант 1: this.myMove.bind(this) (ES5 браузеры только)
Вариант 2: замыкание, var that = this..
Вариант 3: addEventListener('mousemove', this). И добавить метод handleEvent(e), в котором делать switch (e.type) case 'mousemove': ...

[danik.js]

По handleEvent смотри пример: Как сделать чтобы после исправления ошибки текст не оставался красным

[Siend]

Посмотрел пример, но не очень понял.
В примере:

form.addEventListener('input', this);

- //тут мы навесили обработчик прямо на форму, верно? не на объект js, а на сам объект DOM?

Тут понятно - вроде описываем сам обработчик.

handleEvent: function(event) {
            switch (event.type) {
                case 'input':
                    this.validateInput(event.target);
                    break;
                case 'submit':
                    if (!this.validateInputs(this.form.elements))
                        event.preventDefault();
                    break;
            }

Но я что-то так и не разобрался, где вызывается сам обработчик.

[danik.js]

а на сам объект DOM

Не DOM. Просто объект.
Короче, метод addEventListener принимает вторым аргументом либо функцию, либо объект, имеющий метод handleEvent

[Siend]

не врубаюсь все равно...
в моем случае даже замыкание не помогло, потому что я в принципе не могу обратиться к моему объекту, кроме как по ссылке this.

т.е.

допустим у меня 3 объекта XXX, соответственно есть переменная var a = []
Где-то внутри XXX:
a.push(XXX)
this.PoseInA = a.length-1
внутри MyMove(e) я не могу обратиться к this.PoseInA, а значит и к элементу XXX хранящемуся в "a" тоже(

Пытаюсь разобраться c Listener но пока не догоняю. Что мне нужно сделать, можно по шагам расписать?

1. внутри моего объекта XXX:

someFunction(canvas){
XXX=canvas
XXX.addEventListener
}

или

someFunction(canvas){
XXX=canvas
canvas.addEventListener
}

след. шаги не понимаю совсем(

[danik.js]

Мне же нужно в myMove: function (e) получить ссылку на _class

// получу не свой объект XXX на который навешен onmousemove, а элемент html canvas

Нихуя ты упростил. Ты вообще задачу задом наперед поставил ))

Нет, ты как раз получишь ссылку на элемент, на который навешал обработчик. То есть на XXX. Врать не хорошо, тебя не учили разве?

[Siend]

Так, во избежание недопониманий, вот что имеем:

var CanvasControl = new Class();
        CanvasControl.extend({
            init: function (canvas_element) {
                this.canvas = canvas_element;
                this.canvas.width = canvas_element.offsetWidth;
                this.canvas.height = canvas_element.offsetHeight;
                this.ctx = this.canvas.getContext("2d");
                this.WIDTH = window.innerWidth;
                this.HEIGHT = window.innerHeight;
                this.canvas.onmousemove = this.myMove;
                console.log(this) //ВЫВОД 1
            }
        });
        CanvasControl.include({
            /*ClearStyle: function () {
                this.ctx.strokeStyle = "rgba(0,0,0,1)";
                this.ctx.fillStyle = "rgba(0,0,0,1)";
                this.ctx.lineWidth = 1;
            },
            RECT: function (x, y, w, h) {
                this.ctx.beginPath();
                this.ctx.rect(x, y, w, h);
                this.ctx.fill();
                this.ctx.stroke();
            },
            DrawText: function (s, x, y) {
                this.ctx.textBaseline = "middle";
                this.ctx.textAlign = "center";
                this.ctx.strokeText(s, x, y);
            },
            draw: function () {
                this.RECT(0, 0, 100, 100);
            },*/
            myMove: function (e) {
                console.log(this) //ВЫВОД 2
            }
        });

        var can1 = new CanvasControl(document.getElementById("canvasA"));

Вывод 1: _class {canvas: canvas#canvasA, ctx: CanvasRenderingContext2D, WIDTH: 1920, HEIGHT: 602, ClearStyle: function…}HEIGHT: 602WIDTH: 1920canvas: canvas#canvasActx: CanvasRenderingContext2D__proto__: _class
Вывод 2: <canvas id=​"canvasA" width=​"300" height=​"150">​
testClass2.html:91 <canvas id=​"canvasA" width=​"300" height=​"150">​

Вопрос - как обратиться к объекту из Вывод 1 внутри myMove

[danik.js]

Вопрос - как обратиться к объекту из Вывод 1 внутри myMove

Ответ:

Вариант 1: this.myMove.bind(this) (ES5 браузеры только)
Вариант 2: замыкание, var that = this..
Вариант 3: addEventListener('mousemove', this). И добавить метод handleEvent(e), в котором делать switch (e.type) case 'mousemove': ...