无法通过JavaScript添加事件侦听器

Question

目前我有一个循环创建多个HTML对象的函数。每次创建一个对象时，我想向该对象添加一个onClick函数侦听器，以便在单击每个对象时触发一个函数。

最好的方法是什么？

这是创建我的对象的代码：

    RenderMultipleChoice:function()
{
    this.c = paper.rect(this.x, this.y, this.shapeWidth, this.shapeHeight);
}

Answer 1

您可以考虑使用event delegation，而不是为每个创建的元素添加点击侦听器。然后，您只在父级上有一个事件侦听器，并查看该事件冒泡的元素。它也将神奇地用于未来创建的元素。

jQuery有两种方法可以解决这个问题：

• .live() - 将事件监听器绑定到body元素（有缺点）
• .delegate() - 将事件侦听器绑定到您指定的（父级）元素（性能更佳）

示例：

$("#parent").delegate(".child", "click", RenderMultipleChoice);

live是一个很棒的功能，但你应该意识到它的缺点：

Performance difference between jQuery's .live('click', fn) and .click(fn)

http://paulirish.com/2010/on-jquery-live/

Answer 2

您可以使用addEventListener或attachEvent。假设paper.rect返回一个DOM元素：

if(this.c.addEventListener)
{
  this.c.addEventListener("click", listenerFunction, false);
}
else 
{
  this.c.attachEvent("onclick", listenerFunction);
}

有些图书馆可以将其抽象出来。