顾名思义事件委托就是把自己的事情委托给别人去做,事件呢就是比如 onclick onmouseover onmouseout 可以委托到别人的身上去做。利用事件冒泡原理把事件添加到父级上来执行添加效果
好处:性能好
通常我们给一堆 li 添加事件会使用for循环添加这样添加的性能不是很好,那么事件委托就比for循环性能好,代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>33333333</li>
</ul>
<script>
var ul = document.getElementById('ul');
ul.onmouseover = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
ul.onmouseout = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
}
</script>
</body>
</html>