一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
2、DOM 事件流：冒泡事件流、捕获事件流。
3、DOM 事件模型：捕获、目标、冒泡。
那什么是事件委托呢？
事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。
二、事件委托的优点：
那为什么要使用事件委托？事件委托有什么好处，以及使用时要注意什么？
事件委托大概有两个优点：
1、提高网页性能。
2、通过事件委托添加的事件，对后期生成的元素依然有效。
上面提到的第二点如何理解呢？
举个例子：现在页面上有个 ul，ul 里有三个 li，通过循环给每个 li 添加点击事件，发现三个 li 到可以正常触发点击事件了，然后通过 js 代码在 ul 里插入（append）两个 li，
再试着点击所有 li，发现前面三个 li 正常触发点击事件，后面新添加的两个 li 无法正常触发点击事件。
三、事件委托的使用方法：
使用上面 ul 的例子进行事件委托给每个 li 绑定事件，示例代码：
var ul = document.querySelector("ul");
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() === "li"){
alert("li");
}
}
从示例代码中可以看出，要使用事件委托就要利用 event 对象。此处也能很容易的看出事件委托可以提高性能，因为本来需要对每个 li 都进行事件绑定，而现在只需要对 ul 进行事件绑定，减少了对DOM的操作。
四、事件委托怎么获取元素下标（索引值）
示例 demo:
html 代码 效果预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件委托 demo</title>
<style>
body{margin:0;}
ul{
list-style:none;
margin:0 0 0 10px;
padding:0;
}
ul li{
width:50px;
height:50px;
margin-top:10px;
background-color:red;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector("ul");
var li=ul.querySelectorAll("li");
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
for(var i in li){
if(target === li[i]){
var value = parseInt(i);
alert("所点击 li 的下标是：" + value);
}
}
}
</script>
</body>
</html>
最后说下事件绑定可能带来的隐患，当页面非常复杂的情况下，非常容易引起混乱，特别是当多种（个）事件通过事件委托绑定到同一个元素上时。
卓卓亭亭兮 发布于 2017-10-11 23:56:01 浏览：360 类型：原创 - 随笔 分类：性能优化 - JavaScript 二维码：
网友评论