動態創建不同的功能

Question

在我的網頁上，我有幾個元素。對於這些元素中的每一個，我都希望顯示一個彈出元素的ID。不幸的是，由於預期不工作：

我做了一個的jsfiddle來解釋我的問題：https://jsfiddle.net/7gk3aus5/ （點擊的話）

HTML：

<div id='banana'> 
Banana 
</div> 

<div id='strawberry'> 
Strawberry 
</div> 

<div id='apple'> 
Apple 
</div> 

的Javascript：

var divs = document.getElementsByTagName('div'); 
for (var c=0; c<divs.length; c++) { 
    var div = divs[c]; 
    div.onclick = function() {alert(div.id);} 
} 

正如你所看到的，只有'蘋果'會顯示，而我想顯示'香蕉'，'草莓'或'蘋果'，這取決於用戶的位置糟透了。

Answer 1

您可以使用this（監聽器已附加的DOM元素）/ event.target（已單擊的DOM元素）。

div.onclick = function() { 
    alert(this.id); 
} 

demo

OR，

div.onclick = function(event) { 
    alert(event.target.id); 
}