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){// 兼容Ievar 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这个地方，建议你还是把基础学好了在来看。我只是讲我每天学到的东西，不可能一直去讲基础的，还请见谅。