<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#ul {
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function () {
//获取ul按钮
var ul = document.getElementById("ul");
//获取btn按钮
var btn = document.getElementById("btn");
//绑定单击响应函数
btn.onclick = function () {
//alert("添加一个超链接~~~");
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;'' class='link'>超链接一</a>";
//将li添加到ul中
ul.appendChild(li);
};
//为所有的超链接绑定单机响应函数
var allA = document.getElementsByTagName("a");
//遍历
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
alert("我是a的单机响应函数！！！");
};
}
/*
* 我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的
*我们可以尝试将其绑定给元素的共同的祖先元素
*
*
* 事件的委派
* -将其绑定给元素的共同的祖先元素，这样当后代元素的事件触发时，会一直冒泡到祖先元素
* -时间的委派利用了冒泡，减少绑定的次数，提高程序效率
*
*
*/
//为ul绑定一个单机响应函数
ul.onclick = function (event) {
event = event || window.event;
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
if (event.target.className == "link") {
alert("我是ul中的单机响应函数");
}
};
};
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btn">添加一个超链接</button>
<ul id="ul">
<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>
2022/1/13，时间的委派
最新推荐文章于 2024-06-18 14:37:18 发布
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
