JavaScript中什么是事件委托

最新推荐文章于 2024-09-25 18:15:20 发布

JJCTO袁龙

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量1.2k

点赞数 31

分类专栏： JavaScript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/136132586

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JavaScript 中的事件委托（Event delegation）是一种重要的编程技术，它能够优化网页中的事件处理，提高程序的性能和可维护性。本文将详细介绍事件委托的概念、工作原理，并提供示例代码来说明其实际应用。

事件委托是基于事件冒泡机制而存在的。通常情况下，我们会为每个需要响应事件的元素添加事件监听器，而当页面中元素数量庞大时，这样的操作就会导致性能下降和代码维护困难。而事件委托的思想则是将事件监听器添加在其父元素上，通过事件冒泡机制将事件委托给父元素统一处理。这样一来，无论页面中有多少需要响应事件的元素，我们只需在父元素上添加一个事件监听器，即可实现对所有子元素的事件处理。

下面是一个简单的示例，演示如何使用事件委托来实现点击删除按钮删除元素的功能：

<!DOCTYPE html>
<html>
<head>
<title>事件委托示例</title>
<style>
.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-button {
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
  <div class="item">
    <span>元素1</span>
    <span class="delete-button">删除</span>
  </div>
  <div class="item">
    <span>元素2</span>
    <span class="delete-button">删除</span>
  </div>
  <div class="item">
    <span>元素3</span>
    <span class="delete-button">删除</span>
  </div>
  <div class="item">
    <span>元素4</span>
    <span class="delete-button">删除</span>
  </div>
</div>

<script>
const container = document.querySelector('.container');

container.addEventListener('click', function(event) {
  const target = event.target;

  if (target.classList.contains('delete-button')) {
    const item = target.parentNode;
    item.parentNode.removeChild(item);
  }
});
</script>
</body>
</html>