js 怎么给多个div循环添加点击事件

Question

最好是简单点，

Answer 1

window.onload = function(){
    var aDiv = document.getElementByTagName("div");
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].index = i;
        aDiv[i].onclick = function(){
            ...
        }
    }
}

Answer 2

使用事件代理，比循环点击的效率好很多，也更规范。

为li添加点击事件如下：

<ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

第一种 使用循环：

document.addEventListener('DOMContentLoaded', function() {

  let app = document.getElementById('todo-app');
  let items = app.getElementsByClassName('item');

  // 给每个列表项添加事件监听器
  for (let item of items) {
    item.addEventListener('click', function() {
      alert('you clicked on item: ' + item.innerHTML);
    });
  }
});

第二种  事件代理：

document.addEventListener('DOMContentLoaded', function() {

  let app = document.getElementById('todo-app');

  // 给容器添加事件监听器
  app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
      let item = e.target;
      alert('you clicked on item: ' + item.innerHTML);
    }
  });
});

Answer 3

去查一下事件代理相关的知识。