addEventListener僅適用於最後一個對象

在下面的代碼中，似乎我只對最後添加的盒子（b1）進行'otherboxclick'調用。如果我改變這些框的添加順序，它總是最後一個工作。addEventListener僅適用於最後一個對象

我怎樣才能讓它適用於所有的盒子？

<html> 
<head> 
</head> 
<body> 

<script type="text/javascript"> 
    function otherboxclick(e){ 
     alert("other clicked"); 
    } 

    function color_toggle_box(boxid, color, width, height, xpos, ypos) 
    { 
     this.boxid = boxid; 

     document.body.innerHTML += 
      "<div id='" + boxid + "'; '; style='position:absolute;left:" + xpos + "px;top:" + 
      ypos +"px;width:" + width + "px;height:" + height + 
      "px;background:#000'></div>"; 


     this.boxdiv = document.getElementById(boxid); 
     this.boxdiv.style.background = color; 
     this.boxdiv.addEventListener('click', otherboxclick, true); 
    } 

    var b2 = new color_toggle_box("223", "#ff0", 100, 100, 205, 100); 
    alert("b2 = " + b2.boxid); 
    var b3 = new color_toggle_box("323", "#0ff", 100, 100, 100, 205); 
    alert("b3 = " + b3.boxid); 
    var b1 = new color_toggle_box("123", "#0f0", 100, 100, 100, 100); 
    alert("b1 = " + b1.boxid); 
</script> 

</body> 
</html>

來源

2009-10-27 Doug Banks

function color_toggle_box(boxid, color, width, height, xpos, ypos) 
    { 
     this.boxid = boxid; 

     this.boxdiv = document.createElement('DIV'); 
     this.boxdiv.id = boxid; 
     this.boxdiv.style.position = 'absolute'; 
     this.boxdiv.style.left = xpos + "px"; 
     this.boxdiv.style.top = ypos + "px"; 
     this.boxdiv.style.width = width + "px"; 
     this.boxdiv.style.height = height + "px"; 
     this.boxdiv.style.backgroundColor = color; 

     document.body.appendChild(this.boxdiv); 
     this.boxdiv.addEventListener('click', otherboxclick, true); 
    }

來源

2009-10-28 00:04:05

+1我還喜歡將HTML屬性設置爲HTML字符串。在這種情況下可能沒有多大區別，但將HTML字符串拼湊在一起而沒有正確轉義通常是一個非常糟糕的主意。 – bobince 2009-10-28 01:59:02

要解釋爲什麼利奧爾的代碼工作，而您沒有：

document.body.innerHTML +=

始終是一個錯誤。它將您的文檔對象轉換爲HTML字符串，向該字符串添加一些文本，然後重新解析整個HTML以生成替代所有舊文檔對象的新文檔對象。

在最好的情況下，這將工作，但只是有點慢。然而更壞的副作用是任何不能連續化到HTML的信息都將完全丟失。這包括表單字段值，JavaScript屬性和引用以及事件偵聽器。所以，每當你構造一個color_toggle_box時，你就會銷燬你之前聽過的所有對象;因此聽衆永遠不會被稱呼。

來源

2009-10-28 01:56:35 bobince

+1有一個非常好的解釋。 – 2009-10-28 10:19:03

謝謝。最後一條評論解釋了它：addEventListener不會序列化爲html，所以當我使用innerHtml時，我失去了以前的調用。我很欣賞迅速反應，你們搖滾！ – 2009-10-28 14:52:04

實際上，雖然我有人在回答問題：假設我想讓'otherboxclick'成爲一個函數，它可以針對有問題的color_toggle_box做些事情。我明白otherboxclick需要一個'事件'參數，從中我可以得到被點擊元素的ID。我可以使用該id從某個全局列表中獲取有問題的color_toggle_box（就像有一個按id查找框的函數一樣）。但有沒有辦法使用addEventListener將調用與color_toggle_box的正確實例上的函數直接綁定？ – 2009-10-28 14:55:46

addEventListener僅適用於最後一個對象

回答

相關問題