<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var ul = document.getElementById("ul");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 超链接在li里 先创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link''>新建超链接</a>"
//将li添加到ul中
ul.appendChild(li);
}
/*
* 为每一个超链接都绑定一个单击响应函数
* 为每一个超链接都绑定一个单击响应函数，这种操作都比较麻烦
* 而且这些操作只能为已有的超链接设置事件，而新增加的超链接必须重新绑定
*/
//通过标签名获取所有的a标签
var allA = document.getElementsByTagName("a");
//遍历
// for(var i=0 ; i < allA.length ; i++){
// allA[i].onclick = function(){
// alert("a的响应函数")
// }
/*
* 只绑定一次事件，即可应用到多个元素上，即使元素是后添加的
* 尝试将它绑定给元素的共同祖先
*
* 事件的委派
* -指将事件统一绑定给元素的共同祖先，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件
* -事件委派是利用了冒泡，通过委派可以减少事件绑定次数，提高程序的性能
*/
ul.onclick = function(event){
event=event||window.event;
/*
* target
* -event中的target表示触发事件对象
*/
// alert(event.target);
//如果触发对象是我们所期望的，则执行 否则不执行
if(event.target.className == "link"){
alert("ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<button id="btn01">增加超链接</button>
<ul id="ul" style="">
<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>