JavaScript事件委托
介绍
当我们为每个标签添加点击事件的时候：
for(var i = 0;i<lss.length;i++){
lss[i].onclick = function(){
lss[i].style.color = "red";//添加点击事件使得文字的颜色为红色
}
}
此时的每一个标签相当于有自己的一个点击事件函数，这样大大浪费了资源，没有共享，而且当在for循环结束后再添加新的标签，这些标签不会有颜色变红的效果。
所以事件委托就相当于每一个标签的点击事件通过触发父节点的事件来进行触发对象的判断来呈现效果，委托方是每一个标签，处理方是父节点。
实现步骤
- 找到触发节点的父节点
- 绑定事件到此节点的父节点
u.onclick = function (ev) { var e = ev || window.event; var target = e.target || window.event.srcElement;//获取触发对象 if(target.nodeName.toLowerCase() == "li"){ target.style.color = "red"; } } - 找到触发对象，判断触发对象是否是想要的触发对象，进行触发的操作
if(target.nodeName.toLowerCase() == "li"){//判断触发对象 target.style.color = "red"; }
案例
按照演示使用事件委托模型在后续添加的节点上实现同样的效果
完整源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<style>
*{
margin: 0px;
padding: 0px;
text-decoration: none;
font-size: 16px;
text-align: center;
}
body{
margin-top: 100px;
}
</style>
</head>
<body>
<button id="b1">添加标签</button>
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var i=0;
var u = document.getElementById("u1");
var lss = u.getElementsByTagName("li");
//无事件委托
// for(;i<lss.length;i++) {
// lss[i].onclick = function () {
// this.style.color = "red";
// }
// }
i=5;
//事件委托
u.onclick = function (ev) {//绑定事件到父节点
var e = ev || window.event;
var target = e.target || window.event.srcElement;//获取触发对象
if(target.nodeName.toLowerCase() == "li"){//判断事件对象
target.style.color = "red";
}
}
var bt = document.getElementById("b1");
bt.onclick = function () {
i++;
var li = document.createElement("li");//创建新的节点
li.innerText = i;
u.appendChild(li);
}
</script>
</body>
</html>