js遍历元素并添加事件

举个例子：我们需要给每个li标签添加鼠标移入事件

<ul> <li class="active">首页</li> <li>国内</li> <li>国际</li> <li>军事</li> <li>财经</li> <li>互联网</li> <li>体育</li> <li>科技</li> </ul>

下面是js代码

方法一：通过闭包实现

var lis = document.getElementsByTagName("li"); //方法一：闭包 for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",function(k){ return function(){ console.log(k); } }(i)); }

方法二：事件委托

var lis = document.getElementsByTagName("li"); //方法二：事件委托 var ul = document.getElementsByTagName("ul")[0]; ul.addEventListener("mouseover",function(){ var e = arguments[0] || window.event; var target = e.target || e.srcElement; for(var i=0;i<lis.length;i++){ if(lis[i] == target){ console.log(i); } } });

方法三：ES6 let块级作用域实现

var lis = document.getElementsByTagName("li"); //方法三：ES6 let块级作用域 'use script' for(let i=0;i<lis.length;i++){ lis[i].onmouseover = function(){ console.log(i); } }