事件委托的二级菜单编写

一、什么是事件委托？

简单的说，就是把dom事件委托给别人去触发，去做，一般利用冒泡把事件加到父元素的身上，让父元素去执行触发效果。

优点是 ： 提高运行性能，可以大量的节约内存，减少事件注册；当元素本身有增删改查的时候  ，如果元素不存在了，那么也不用对元素进行事件绑定了。

二、简单的看下例子

<ul id="ul">
<li>菜单1
<div>

</div>
</li>
<li>菜单2
<div>

</div>
</li>
<li>菜单3
<div>

</div>
</li>
</ul>

这个是个二级菜单；

开始我们让所有的div隐藏，然后给他ul 一个事件委托 去改变每个li 下面的div出现隐藏，大量减少了事件；

下面是js代码：

<script>

var ul = document.getElementById("ul");
var oLi = ul.getElementsByTagName('li');

ul.addEventListener('mouseover',function(e){

if(e.target&&e.target.nodeName == "LI"){

var index;
for(var i = 0;i<oLi.length;i++){


if(e.target === oLi[i]){
index = i;
console.log(index);


var div = oLi[i].getElementsByTagName("div")[0];


div.style.display='block';


}




}




}
})


ul.addEventListener('mouseout',function(e){

if(e.target&&e.target.nodeName == "LI"){

var index;
for(var i = 0;i<oLi.length;i++){


if(e.target === oLi[i]){
index = i;
console.log(index);


var div = oLi[i].getElementsByTagName("div")[0];


div.style.display='none';


}




}


}
})




</script>

这样一个简单的事件委托版的二级菜单就实现了。