代码之家  ›  专栏  ›  技术社区  ›  Jack Roscoe

通过javascript添加事件侦听器时出现问题

  •  0
  • Jack Roscoe  · 技术社区  · 14 年前

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

    最好的方法是什么?

    下面是创建我的对象的代码:

        RenderMultipleChoice:function()
    {
        this.c = paper.rect(this.x, this.y, this.shapeWidth, this.shapeHeight);
    }
    
    2 回复  |  直到 14 年前
        1
  •  2
  •   Community CDub    7 年前

    你可以考虑使用 event delegation 而不是向每个创建的元素添加单击侦听器。然后在父级上只有一个事件监听器,并查看事件冒泡出的元素。它还可以神奇地为将来创建的元素工作。

    jquery有两种方法可以为您处理此问题:

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

    例子:

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

    生活是一个很棒的功能,但是你应该意识到它的缺点:

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

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

        2
  •  1
  •   Matthew Flaschen    14 年前

    你可以使用 addEventListener attachEvent . 假设paper.rect返回一个dom元素:

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

    有一些图书馆可以把这个抽象化。