JS闭包机制实现为DOM元素循环添加事件

Posted 2020-11-22 Chien

html代码：

<button type=‘button‘ class=‘btn‘ id=‘1‘>按钮1</button>
<button type=‘button‘ class=‘btn‘ id=‘2‘>按钮1</button>
<button type=‘button‘ class=‘btn‘ id=‘3‘>按钮1</button>
<button type=‘button‘ class=‘btn‘ id=‘4‘>按钮1</button>

JS代码：

var btn = document.querySelectorAll(‘.btn‘);

for(var i =0; i<btn.length; i++)
{
      ((i)=>{
              btn[i].onclick = ()=>{
                       aleter(‘我是按钮‘+btn[i].getAttribute(‘id‘));
              };
      })(i);
}