事件的委派
- 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
- 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">添加超链接</button>
<ul id="u1">
<li><a href="javascript:;" class="link">超链接一</a></ li>
<li><a href="javascript:;" class="link">超链接二</a></ li>
<li><a href="javascript:;" class="link">超链接三</a></ li>
</ul>
</body>
<script>
//为btn添加单击响应函数
var btn=document.getElementById("btn");
btn.onclick=function(){
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
u1.appendChild(li);
};
//为u1绑定一个单击响应函数
var u1=document.getElementById("u1");
u1.onclick=function(event){
event=event || window.event;
//event中的target表示的是触发事件的对象
//如果触发事件的对象是我们期望的元素,则执行,否则不执行
if(event.target.className=="link"){
alert("我是u1的单击响应函数");
}
};
</script>
</html>