- 指将事件统一给元素的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数处理事件。
- 事件委派是利用了冒泡,通过委派可以减少绑定的次数,提高程序的效率
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementById("u1");
var test01 = document.getElementById("test01");
test01.onclick = function () {
var li = document.createElement("li")
li.innerHTML = "超链接新建"
ul.appendChild(li);
}
var allA = document.getElementsByTagName("a");
//遍历
/* for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
alert("函数")
}
}*/
//换成委派给父元素
ul.onclick = function (event) {
event = event || window.event;
if (event.target.className === "link") {
alert("我是新增的委派给a的函数")
}
}
/**
* 我们希望,只绑定一次,即可应用到多个元素上,即使元素是后续添加的,
*/
}
script>
head>
<body>
<button id="test01">添加超链接button>
<ul id="u1">
<li><a href="javascript:;" class="link">超链接1a>li>
<li><a href="javascript:;" class="link">超链接2a>li>
<li><a href="javascript:;" class="link">超链接3a>li>
ul>
body>
html>
学习链接:https://www.bilibili.com/video/BV1YW411T7GX/?p=114&spm_id_from=pageDriver&vd_source=5c6715c821736527d8cbde277542107a