发表于： 2020-07-31 23:38:48
1 1166
今天完成的事情：
学习事件的委派
<script>
window.onload = function () {
var u1 = document.getElementById("u1");
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
// 将li添加到u1中
u1.appendChild(li);
};
/*
为每个超链接都绑定一个单击响应函数
这里为每一个超链接绑定一个单击响应函数操作比较麻烦
而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须要重新绑定
*/
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 遍历
/*for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
alert("我是a的单击响应函数！！！");
};
}*/
/*
我们希望，只绑定一次事件，即可应用到多个的元素上即使元素是后添加的
可以尝试将其绑定给元素的共同的祖先元素
事件的委派
-指将事件统一绑定给元素的共同祖先这样当后代上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件。
-事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序性能
*/
// 为ul绑定一个单击响应函数
u1.onclick = function () {
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="u1" style="background-color: #bfa;">
<li>
<p>我是元素p</p>
</li>
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
返回列表
评论