Javascript 自定义对象和事件侦听器

我正试图用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");
    };
};

---

“…”只是我缩短了这篇文章的代码，实际上还有很多东西，但与这个问题无关。

你可以很容易地将

addEventListener

方法添加到你的对象中（无论如何，在大多数浏览器中，可能无法在

IE<8

中工作）

然而，当它被点击时，它不会神奇地触发点击事件。您仍然需要通过监视

元素上的事件来生成这些代码。因此，当然最好只滚动您自己的事件监听器，或者合并现有库中的事件监听器（见下文），而不是尝试从DOM库继承，因为这可能会变得粗略

您很可能只想使用类似的

库。其中包含了所有这些内容，并使用类似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();
    }
  }
});

var按钮=[]；//存储所有按钮实例
var canvas=document.getElementById（'#myCanvas'）；
canvas.bind（'mousemove'，函数（事件）{
var i=按钮长度；
而(我--){
变量框={
x:[按钮[i]。x，按钮[i]。位置x+按钮[i]。宽度]，
y:[按钮。y，按钮[i]。位置y+按钮[i]。高度]
};
if（event.clientX>box.x[0]&&event.clientXbox.y[0]&&event.clientY
这是个好问题，但我怀疑它是否可以通过扩展HTML元素来实现。也不可能初始化像
new htmldevelment
这样的HTML元素，因此我不确定是否可以扩展一个。您可以扩展原型，但不能使新类型的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();
    }
  }
});