事件委托
先看问题,如下,需要实现当鼠标悬停在哪个li标签时,就弹出123的提示。
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
方法一
用for循环遍历每个li元素为其绑定事件。这是一般的做法。
方法二
为事件绑定ul元素实现上述效果的办法就是事件委托。
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
//将ul这个dom节点储存在变量oul中
oUl.onclick = function(){
alert(123);
//为上述节点绑定事件
}
}
</script>
那么为啥绑定的是ul,点击li标签内内容时,会触发事件呢?这是因为一般的浏览器默认都是采用冒泡的事件流。
为啥要事件委托
节省内存