本文详解JavaScript中的事件委托（代理）技术。通过对比传统绑定与委托方式，说明利用DOM事件冒泡机制将子元素事件监听提升至父元素的原理。文章展示了节省内存、支持动态新增元素等优势，并附带完整代码示例演示具体实现方法。
简介
说明
本文通过具体示例，详细讲解JavaScript中事件（Event）委托（代理）的实际应用方法。
事件委托简介
事件委托，亦称为事件代理，是JavaScript开发中绑定事件的一种常用技巧。其核心思路是将原本需要直接绑定在子元素上的响应事件，转移委托给父元素或更外层的容器元素，由外层元素统一承担事件监听的任务。
事件代理的技术原理基于DOM元素的事件冒泡机制。
事件委托的优点
1. 节省内存空间，减少事件绑定的数量
采用事件委托后，原本需要为所有子元素逐一绑定的事件，现在只需在外层父元素上绑定一次即可实现。
2. 支持动态绑定事件，新增的子对象无需额外处理
由于新加入的子元素产生的事件同样会向上冒泡至父元素，因此能够被已绑定的事件处理器自动捕获并处理。
示例：事件委托
需求场景：一个列表，点击列表中的元素时，弹出显示该元素的内容。
写法1：使用事件委托
实现方式：只需在外层容器元素上绑定事件监听器即可。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<script>
let ul = document.getElementById('id-ul');
ul.addEventListener("click", function (ev) {
alert(ev.target.innerText);
})
</script>
</body>
</html>结果
写法2：每个子元素单独绑定事件
实现方式：为列表中的每个子元素都单独绑定事件监听器。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<script>
let li = document.querySelectorAll('#id-ul li');
for (let liElement of li) {
liElement.addEventListener("click", function (ev) {
alert(ev.target.innerText);
});
}
</script>
</body>
</html>结果
示例：动态新增元素
需求场景：每次点击“生成按钮”，就动态生成一个新的子列表元素。随后，点击任意列表元素（包括原有和新生的），弹出其内容。
写法1：使用事件委托
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">click</button>
<script>
let num = 3;
let eUl = document.querySelector("#id-ul");
let eButton = document.querySelector("#btn");
eButton.addEventListener("click", function () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
eUl.addEventListener("click",function (event) {
alert(event.target.innerText);
})
</script>
</body>
</html>结果
可以看到，无论是原有的元素还是新建的元素，其点击事件都能被正确处理。
写法2：每个子元素单独绑定事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">click</button>
<script>
let num = 3;
let eUl = document.querySelector("#id-ul");
let eButton = document.querySelector("#btn");
let eLi = document.querySelectorAll("#id-ul li");
eButton.addEventListener("click", function () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
for (let eLiElement of eLi) {
eLiElement.addEventListener("click",function (event) {
alert(event.target.innerText);
})
}
</script>
</body>
</html>结果
可以看到：原有元素的点击事件会被正常处理，但新加入的元素不会被处理。
到此这篇关于JavaScript事件的委托(代理)的用法示例详解的文章就介绍到这了,更多相关JavaScript事件委托内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！