Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2016, 22:47
Новичок на форуме
Отправить личное сообщение для Morr123 Посмотреть профиль Найти все сообщения от Morr123
 
Регистрация: 09.08.2016
Сообщений: 4

свойства объекта события
Есть такой класс
function Sketch(name) {
      this.isDrawing;
        
      this.canvas = document.getElementById(name);
      this.context = this.canvas.getContext("2d");
      // Подключаем требуемые для рисования события
      this.canvas.onmousedown = this.startDrawing;
      this.canvas.onmouseup = this.stopDrawing;
      this.canvas.onmouseout = this.stopDrawing;
      this.canvas.onmousemove = this.draw;
      this.context.lineWidth = 5;
      this.context.strokeStyle = '#ff0';
      this.context.lineJoin = "round";
      this.context.lineCap = "round";
 
   this.startDrawing = function(e) 
   {
    // Начинаем рисовать
       this.isDrawing = true;
    
    // Создаем новый путь (с текущим цветом и толщиной линии) 
       this.context.beginPath();
    
    // Нажатием левой кнопки мыши помещаем "кисть" на холст
       this.context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
    }
 
    this.draw = function(e) 
    {
       if (this.isDrawing == true)
       {
        // Определяем текущие координаты указателя мыши
          var x = e.pageX - this.canvas.offsetLeft;
          var y = e.pageY - this.canvas.offsetTop;
        
        // Рисуем линию до новой координаты
          this.context.lineTo(x, y);
          this.context.stroke();
       }
    }
 
    this.stopDrawing = function() 
    {
        isDrawing = false;  
    }
 
};


где свойства this.canvas.onmousedown и т.д. это события к которым присвоено значение обработчика.

при объявлении данного класса в коде
var sketch = new Sketch('sketch');


этот класс поидее должен слушать эти события и внутри себя реагировать на них, но он этого не делает! даже по дебагеру события просто не срабатывают. Если написать тоже самое только не в классе а обычными функциями то все работает.
Как мне сделать это в стиле ООП, но что бы срабатывали события?
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2016, 00:12
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,616

Morr123,
this.canvas.onmousedown = this.startDrawing.bind(this);
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2016, 00:29
Интересующийся
Отправить личное сообщение для renatdmit Посмотреть профиль Найти все сообщения от renatdmit
 
Регистрация: 09.08.2016
Сообщений: 20

Morr123,

this.startDrawing такая же переменная, как и все прочие, несмотря на то, что ей присваивается функция. Поэтому когда вы пытаетесь событиям присвоить значение переменной, которая определяется ниже по коду - естественно ничего не присваивается.

Это как если бы вы написали:

a = c;
b = c;

c = 1;

и ждали бы что a и b будут у вас равны 1.

Последний раз редактировалось renatdmit, 10.08.2016 в 00:35.
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2016, 07:29
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Если бы ТС посмотрел в консоль браузера, то все сам бы понял. ТС, открой тайну, почему народ вроде тебя не смотрит лог ошибок и предупреждений?
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2016, 07:36
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от renatdmit
this.startDrawing такая же переменная
Которой присвоена безымянная функция. А ТС привык декларировать подпрограммы function name(){}, когда расположение такой декларации в коде николебет.

ТС, а расположение переменных - колебет. Просто перемести вниз листенеры и все.

ЗЫ Нет, не все. Господин профессор Rise напоминает, что this внутри калбека листенера будет элементом, на котором висит листенер. Так вот, биндить объектный this внутрь калбека тут просто необходимо, но приятнее иметь оба this'а, ради чего просто присвой внутренней переменной с любым именем this объекта, например

var the = this;

и замени в калбеке this.startDrawing все this на the

Решение с the=this принимается исходя из контекста. Если this как элемент точно не нужен - бинди, а если нужен, например там роутер и надо проверять if(this===e.target) то присваивай.

И последнее. Я совершенно уверен, что практически все проперти и методы в этом объекте можно сделать приватными, а значит никаких this вообще не надо. Функция просто развешает калбеки в своем скопе и все будет работать само по себе.

Последний раз редактировалось warren buffet, 10.08.2016 в 07:49.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Название свойства объекта из цифр zhurchik Общие вопросы Javascript 15 16.03.2015 12:11
Несколько событий(onmouseover), одна функция. Передача объекта события. IDCh Javascript под браузер 4 29.08.2012 16:35
IE 8 Не удалось получить значение свойства "match": значением объекта является null abstract Internet Explorer 2 26.08.2011 15:27
Как при чтении или записи свойства объекта вызывать функцию danik.js Общие вопросы Javascript 3 16.09.2010 17:57
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01