在JavaScript中，事件委托（Event Delegation）是一种用于处理事件的技术，它利用了事件冒泡（Event Bubbling）的特性。通过事件委托，你可以将事件监听器添加到一个父元素上，而不是每个子元素上，这样可以减少内存使用，提高性能，特别是当需要处理大量相似元素或动态添加的元素时。
以下是一个使用事件委托模型的简单例子，该例子展示了如何监听动态添加到页面中的按钮的点击事件：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
</head>
<body>
<div id="buttonContainer">
<!-- 初始按钮 -->
<button class="myButton">Click Me</button>
<!-- 这里可以动态添加更多按钮 -->
</div>
<script src="event-delegation.js"></script>
</body>
</html>
JavaScript (event-delegation.js):
// 获取容器元素
const buttonContainer = document.getElementById('buttonContainer');
// 为容器元素添加点击事件监听器
buttonContainer.addEventListener('click', function(event) {
// 检查被点击的元素是否是我们要处理的元素（这里是有 .myButton 类的按钮）
if (event.target.matches('.myButton')) {
// 处理按钮点击事件
alert('You clicked a button!');
console.log('Clicked button:', event.target.textContent);
}
});
// 模拟动态添加按钮
setTimeout(function() {
// 创建一个新的按钮
const newButton = document.createElement('button');
newButton.className = 'myButton'; // 设置类名以便事件委托可以识别
newButton.textContent = 'Newly Added Button';
// 将新按钮添加到容器中
buttonContainer.appendChild(newButton);
}, 2000); // 两秒后添加新按钮
在这个例子中，我们首先在buttonContainer元素上添加了一个点击事件监听器。然后，我们使用了event.target.matches('.myButton')来检查被点击的元素是否匹配我们想要的元素（即具有.myButton类的按钮）。如果匹配，我们就执行相应的操作（在这个例子中是弹出一个警告框并打印按钮的文本内容到控制台）。
之后，我们使用setTimeout来模拟动态地向页面添加一个新的按钮。由于我们使用了事件委托，所以这个新添加的按钮也会自动拥有相同的事件处理逻辑，而不需要我们为它单独添加事件监听器。
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
