视频链接视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的委派</title>
<style type="text/css">
#u1{
background-color: #6495ED;
}
</style>
<script type="text/javascript">
window.onload=function(){
/**
* 事件的委派：
* 将元素绑定给一个元素的共同的祖先元素，这样当后代元素的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件
* 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
var btn01=document.getElementById("btn01");
var u1=document.getElementById("u1");
btn01.onclick=function(){
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>超链接</a>";
u1.appendChild(li);
}
var allA=document.getElementsByTagName("a");
// for(var i=0;i<allA.length;i++){
// allA[i].οnclick=function(){
// alert("!");
// }
// }
/*
* 我们希望只绑定一次事件 可以应用到多个元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素共同的父元素
* 为ul绑定一个单击响应函数
*/
u1.onclick=function(event){
//如果触发事件的对象是期望的元素 则执行 否则不执行
event=event||window.event;
if(event.target.className=="link"){
alert("我是ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<button id="btn01">按钮1:点击按钮添加超链接</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>
<li><a href="javascript:;" class="link">超链接</a></li>
</ul>
</body>
</html>