通過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); 

現場是一個真棒功能，但你應該知道它的缺點：

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

有些庫需要將它抽象出來。