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