Javascript 按类名添加对象监听器

Question

我想向动态创建的元素添加“点击”监听器。我的代码是:

function addListenerToElements (){
        var aTags = document.getElementsByClassName("classElements")
        for (var i=0;i<aTags.length;i++){
            aTags[i].addEventListener('click',myFunction);
        }
    }

    function myFunction() {
        console.log("something");
    }

但它不起作用(控制台中没有错误)

Answer 1

正如您所说的动态添加元素，事件委托(delegate)将是更好的方法。以下适用于静态元素，也适用于动态添加的元素:

document.getElementById("container").addEventListener("click", function(e) {
  if (e.target && e.target.matches("div.className")) {
    console.log('element clicked', e.target.innerText);
    // or call your function
  }
});
var index = 0;
document.getElementById('add').addEventListener('click', function(e) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(index++));
  div.className = 'className';
  document.getElementById('container').appendChild(div);
});

<div id="container">
  <div class="className">a</div>
  <div class="className">b</div>
  <div class="className">c</div>
  <div class="className">d</div>
  <div class="className">e</div>
</div>
<button id="add">Add Element</button>