js事件委托也叫事件代理，实际上事件委托就是通过事件冒泡实现的，所谓的事件就是onclick，onmouseover，ondown等等，那么委托呢？委托就是指本来这个事是要你自己做的，但是你却让别人帮你完成这个事，这就叫事件委托。
那么为什么需要事件委托？我们先看一段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script>
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover = function(){
this.style.backgroundColor = "red";
}
li[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
出现的问题1、我们现在的做法是给最具体的元素添加onmouseover事件，这样的话，我们有多少个元素就要循环绑定多少次，严重消耗性能。
如果你这还不觉得没有什么事的话，那么再看一个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<button id="btn">添加</button>
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script>
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover = function(){
this.style.backgroundColor = "red";
}
li[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
var btn = document.getElementById("btn");
btn.onclick = function(){
var createLi = document.createElement("li");
createLi.innerHTML = "我是新添加的li";
ul.appendChild(createLi);
}
</script>
</body>
</html>
发现没有？我们后面添加的li却没有onmouseover事件，因为我们在创建这些li的时候，我们在创建这些元素的时候已经for循环完了，后面并没有给后面创建的li添加事件，但是有很多时候我们确实需要在后来添加的元素也需要同样的事件，那这显然有些麻烦，但是我们用事件委托就好办多了。
通过事件委托实现给每个li添加onmouseover事件，其实我更细喜欢说是通过事件冒泡。
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
ul.onmouseover = function(event){
// 兼容Ie
var event = event || window.event;
// 获取最具体的元素
var target = event.srcElement || event.target;
// 判断这个元素是不是ul，如果是的话就不给它添加背景，需要我们只是需要给li添加
if(target.nodeName.toLowerCase()!=="ul"){
target.style.backgroundColor = "red";
}
}
ul.onmouseout = function(event){
var event = event || window.event;
var target = event.srcElement || event.target;
if(target.nodeName.toLowerCase()!=="ul"){
target.style.backgroundColor = "";
}
}
var btn = document.getElementById("btn");
btn.onclick = function(){
var createLi = document.createElement("li");
createLi.innerHTML = "我是新添加的li";
ul.appendChild(createLi);
}
ok，后添加的元素也会有我们添加的事件。如果你没有看懂这段代码，我觉得你应该是困在event这个地方，建议你还是把基础学好了在来看。我只是讲我每天学到的东西，不可能一直去讲基础的，还请见谅。