如何爲div中的所有元素設置點擊處理程序

Question

我有一堆元素，我想爲它們設置一個點擊處理程序，然後根據點擊哪個元素來做點什麼。對於這個例子，你可以讓它發出一個警告，說明被點擊的按鈕的類。我的元素看起來像這樣：<input type="button" class="numpad np-txtTP">，它們都包含在同一個元素中。在我的情況下，我想採取np-txt之後的任何內容，並將其添加到文本框中。

Answer 1

var container = document.getElementById('container'); 
var elements = container.getElementsByTagName('input'); 
for(i = 0; i < elements.length; i++){ 
    elements(i).addEventListener('click', function() { 
     alert(this.className); 
    }); 
} 

將一個單擊處理程序分配給ID container的元素中的所有輸入元素會提醒自己的類名

---

這也很容易在jQuery的完成以下列方式如果你有機會它

$(function() { 
    $('input[type=button]').click(function() { 
     alert($(this).prop('class')); 
    }); 
}); 

Answer 2

document.getElementById("yourdiv").addEventListener("click",function(e) { 
    if(e.target && e.target.nodeName == "INPUT") { 
     //do something to e.target here 
    } 
} 

這叫做事件委託，它允許你爲一個元素的幾個後代只綁定一個處理器。