javascript - div 内のすべての要素に対してクリック ハンドラーを設定する方法

Question

たくさんの要素があり、それらすべてにクリック ハンドラーを設定し、クリックされた要素に基づいて何かを実行したいと考えています。この例では、クリックされたボタンのクラスを示すアラートを出すだけです。私の要素は次のよう<input type="button" class="numpad np-txtTP">になります。それらはすべて同じ要素に含まれています。私の場合、後にあるものは何でも取りnp-txt、それをテキストボックスに追加したいと思います。

Answer 1

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

これはイベント委任と呼ばれ、要素の複数の子孫に対して 1 回だけハンドラーをバインドできるようにします。

Answer 2

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

containerクラス名を警告するidの要素内のすべての入力要素にクリックハンドラーを割り当てます

---

これは、jQueryにアクセスできる場合は、次の方法で簡単に実行することもできます。

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