Пользовательский объект и EventListeners

Question

Я пытаюсь написать свой собственный объект кнопки в JavaScript, который можно поместить на холст HTML5.У меня проблема с добавлением слушателя событий в мою функцию.Я предполагаю, что мне нужно расширить объект, который на самом деле имеет метод addEventListener, но я не уверен, как это сделать в JavaScript.Ниже приведен фрагмент моего кода.

function Button(bContext, ...) {
    var self = this;
    var context = bContext;
    ...


    self.addEventListener('mouseover', self.mouseOverListener, false);
    ...

    self.drawMe = function() {
    ...
    };

    self.mouseOverListener = function() {
        alert("Hovering");
    };
};

«...» - это просто сокращение кода для этого поста, на самом деле там гораздо больше материала, но он не имеет отношения кэтот вопрос.

Answer 1

Вы можете легко добавить метод addEventListener к своему объекту (в любом случае, в большинстве браузеров он может не работать в IE < 8)

self.addEventListener = document.body.addEventListener

Тем не менее, он не будет волшебным образом вызывать события щелчка при нажатии. Вам все равно придется генерировать их самостоятельно, отслеживая события в элементе <canvas>. Таким образом, определенно лучше просто свернуть свой собственный прослушиватель событий или включить его из существующей библиотеки (см. Ниже), чем пытаться наследовать от DOM, так как это может стать отрывочным.

Вероятность того, что вы просто захотите использовать библиотеку <canvas>, такую ​​как raphael.js , довольно высока. Который включает в себя все эти вещи и реализует собственный Element объект с DOM-подобными событиями. Тем не менее, если вы действительно хотите развернуть свое собственное решение, это довольно просто, если вы хотите захватывать только события щелчка внутри прямоугольных областей (другой вопрос - найти точки на изогнутых элементах).

Вот быстрый псевдокод

var buttons = []; // stores all button instances
var canvas = document.getElementById('#myCanvas');
canvas.bind('mousemove',function(event){
  var i = buttons.length;
  while(i--){
    var box = { 
       x: [buttons[i].x, buttons[i].pos.x+buttons[i].width], 
       y: [buttons.y, buttons[i].pos.y+buttons[i].height]
    };
    if(event.clientX > box.x[0] && event.clientX < box.x[1] && event.clientY > box.y[0] && event.clientY < box.y[1]){
       buttons[i].click();
    }
  }
});