一、什么是事件委托?
简单的说,就是把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>
这样一个简单的事件委托版的二级菜单就实现了。