單擊元素上的監聽器與onclick元素（函數關閉與對象索引查找）

我將在JavaScript中有大量的對象，其在頁面上的可視表示將作爲div（divs將顯示和隱藏，具體取決於鼠標位置）。單擊元素上的監聽器與onclick元素（函數關閉與對象索引查找）

要與對象進行交互，我試圖決定在點擊偵聽器之間添加<button>元素（或帶有onclick屬性的其他元素）或<div>。

與點擊偵聽器一起使用<div>的優點在於，回調函數（即click處理函數）將在與其可視表示（父div）對應的對象上具有閉包。因此，當我點擊時，它知道我正在與哪個對象進行交互。

使用<button>元素（或具有onclick屬性的其他DOM元素）的優點是該頁面註冊的聽衆較少。但是使用<button>元素的缺點是其點擊處理函數而不是在對象上有閉包，因此引用正確對象的唯一方法是通過某種索引，其中每個對象都擁有唯一的名稱。只有2個對象爲例（我將在我的網頁更多）：

var arrayOfObjects = []; 

var anObj = { 
    // some info about object 
    this.indxInArray = arrayOfObjects.push(this); 
    this.clickFunction = function() { 
     // insert logic for click listener... 
    }; 
    var that = this; 
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction"); 
    $('anObj').append(that.theButton); 
} 

var anotherObj = { 
    // some info about object 
    this.indxInArray = arrayOfObjects.push(this); 
    this.clickFunction = function() { 
     // insert logic for click listener... 
    }; 
    var that = this; 
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction"); 
    $('anotherObj').append(that.theButton); 
} 


// ... HTML stuff: 
<div id='anObj'> 
</div> 

<div id='anotherObj'> 
</div>

按鈕的方式似乎是指在DOM的JavaScript對象的骯髒和單調乏味的方式，但它確實節省了一大堆點擊偵聽器。

我的問題是：是否有很多註冊事件監聽器顯着降低性能？當保存註冊元素的父元素被隱藏時，此性能影響會消失嗎？

來源

2011-09-16 achow

編輯:(因爲我不知道你有多少聽衆在談論:)如果你有10個以下的聽衆，我會去那。否則，它可能會降低瀏覽器性能，所以我會採用按鈕方式。

但是，如果你在聽點擊，你不能做你想要的「onclick」嗎？這絕對是最快的方式。

來源

2011-09-16 01:01:24 BenjaminRH

我使用的onclick按鈕，這不會給我關閉對象。如果我在其他元素（如div）上使用onclick，會出現同樣的問題。 – achow

你真的應該發佈工作代碼。據我可以告訴這裏是你實際上想要做的按鈕：

（哦，你正在把一個不正確的數組索引放入一個在線監聽器）。

var arrayOfObjects = []; 
var oButton = document.createElement('button'); 

var anObj = { 
    // some info about object 
    // Push returns the new legnth of the array, so your indexes will be out by 
    // one unless you subtract 1. 
    this.indxInArray = arrayOfObjects.push(this) - 1; 
    this.clickFunction = function() { 
     // insert logic for click listener... 
    }; 

    // Clone is a (better in my view) alternative to innerHTML 
    this.theButton = oButton.cloneNode(false); 
    this.theButton.onclick = arrayOfObjects[this.indxInArray].clickFunction; 
    document.getElementById9('anObj').appendChild(this.theButton); 
}

但我不明白你爲什麼要使用這種方法。只要把聽衆放在div上，如果有很多的話，它對性能沒有影響，唯一的開銷就是把它們放在首位。

來源

2011-09-16 02:55:20 RobG

單擊元素上的監聽器與onclick元素（函數關閉與對象索引查找）

回答

相關問題