自定义对象和事件监听器

Question

我正在尝试用 JavaScript 编写我自己的按钮对象，该对象可以放置在 HTML5 画布上。我遇到的问题是将事件侦听器添加到我的函数中。我的假设是我需要扩展一个实际上具有 addEventListener 方法的对象，但我不确定如何在 JavaScript 中执行此操作。下面是我的一些代码的 sn-p：

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();
    }
  }
});