<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function (){
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
var ul=document.getElementById("ul");
btn01.onclick=function (){
// 创建一个li
var li = document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>aaa超链接一</a>";
ul.appendChild(li)
};
// 为每一个超链接都绑定一个单机响应函数
// 这个操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 遍历
// for(var i=0 ;i<allA.length;i++){
// allA[i].οnclick=function (){
// alert("我被响应了")
// };
// }
// 我们希望只绑定一次事件,就应用到所有的元素上,即使元素是后添加的
// 可以尝试将其绑定给元素的共同元素
//
// 事件的委派
// 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先函数
// 从而通过祖先元素的响应事件来处理事件
// 事件委派是利用冒泡,通过委派可以减少事件委派的次数
// 为ul绑定一个单击响应函数
ul.onclick= function (event){
//target
// event中的target表示的是触发事件的对象
//如果触发事件的对象是我们期望的元素,则执行否则不执行
if(event.target.className==="link")
alert("我被响应了")
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</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>
DOM事件的委派
最新推荐文章于 2022-07-22 08:14:59 发布