如何使用JavaScript通过事件委托和数据集属性实现动态内容更新

在前端页面开发中，经常会遇到需要动态新增、修改页面元素内容的需求，比如列表项的添加、删除、状态切换等场景。如果直接给每个动态生成的元素单独绑定事件，不仅代码冗余，还会在元素被移除后造成事件监听无法释放的问题。而事件委托结合数据集属性的方案，可以很好地解决这类问题，提升代码的性能和可维护性。

事件委托的基本原理

事件委托的核心是利用DOM事件的冒泡机制，将子元素需要触发的事件统一绑定到其共同的父元素上。当子元素触发事件时，事件会向上冒泡到父元素，父元素通过判断触发事件的源元素，执行对应的逻辑。这种方式不需要为每个子元素单独绑定事件，即使后续动态新增子元素，事件也能正常触发。

比如页面中有一个<ul>列表，里面包含多个<li>项，我们不需要给每个<li>绑定点击事件，只需要给<ul>绑定一次点击事件即可。

数据集属性的使用方式

HTML5提供了data-*自定义属性，允许我们在元素上存储私有自定义数据，这些数据可以通过JavaScript的dataset属性读取和修改。比如我们可以给元素添加一个data-id属性存储唯一标识，添加data-action属性存储需要执行的操作类型。

读取数据集属性的方式很简单，假设元素有一个data-user-name属性，那么通过element.dataset.userName就可以获取到对应的值，注意属性名中的短横线会转换为驼峰命名。

两者结合实现动态内容更新

下面通过一个具体的示例来演示如何结合事件委托和数据集属性实现动态列表的内容更新，示例包含列表项的添加、删除和内容切换功能。

HTML结构

<div class="container">
  <button class="add-btn">添加列表项</button>
  <ul class="list">
    <li data-id="1" data-status="未完成">
      任务1
      <button class="del-btn" data-action="delete">删除</button>
      <button class="toggle-btn" data-action="toggle">切换状态</button>
    </li>
  </ul>
</div>

JavaScript实现逻辑

首先给列表的父元素<ul>绑定点击事件，通过事件委托处理子元素的删除和状态切换操作，同时给添加按钮绑定点击事件实现动态新增列表项。

// 获取列表容器和添加按钮
const listEl = document.querySelector('.list');
const addBtn = document.querySelector('.add-btn');
// 用于生成唯一id的计数器
let idCounter = 2;

// 给列表容器绑定点击事件，实现事件委托
listEl.addEventListener('click', function(event) {
  // 获取触发事件的目标元素
  const target = event.target;
  // 判断点击的是删除按钮
  if (target.classList.contains('del-btn')) {
    // 找到对应的li元素并移除
    const liEl = target.closest('li');
    if (liEl) {
      liEl.remove();
    }
  }
  // 判断点击的是切换状态按钮
  if (target.classList.contains('toggle-btn')) {
    const liEl = target.closest('li');
    if (liEl) {
      // 读取当前的状态数据集属性
      const currentStatus = liEl.dataset.status;
      // 切换状态内容
      liEl.dataset.status = currentStatus === '未完成' ? '已完成' : '未完成';
      // 更新li的文本内容，保留按钮
      const textNode = liEl.childNodes[0];
      textNode.textContent = `任务${liEl.dataset.id} (${liEl.dataset.status}) `;
    }
  }
});

// 给添加按钮绑定点击事件，动态新增列表项
addBtn.addEventListener('click', function() {
  // 创建新的li元素
  const newLi = document.createElement('li');
  // 设置数据集属性
  newLi.dataset.id = idCounter;
  newLi.dataset.status = '未完成';
  // 设置li的内容，包含文本和两个操作按钮
  newLi.innerHTML = `任务${idCounter} (未完成) 
    <button class="del-btn" data-action="delete">删除</button>
    <button class="toggle-btn" data-action="toggle">切换状态</button>`;
  // 将新li添加到列表中
  listEl.appendChild(newLi);
  // 计数器自增
  idCounter++;
});

方案的优势

• 减少事件绑定次数，提升页面性能，尤其是动态元素较多的场景
• 动态新增的元素不需要重新绑定事件，降低代码维护成本
• 数据集属性可以灵活存储自定义数据，不需要额外定义全局变量存储元素关联信息
• 代码结构更清晰，事件处理逻辑集中在父元素上，便于后续扩展

注意事项

使用事件委托时，需要注意事件冒泡的层级，尽量将事件绑定到最近的稳定父元素上，避免事件触发范围过大影响性能。另外读取dataset属性时，属性名如果是data-xxx-yyy的形式，对应的dataset键名是xxxYyy，不要写错命名格式。如果存储的是复杂数据，也可以将对象序列化为JSON字符串存储在数据集属性中，读取时再反序列化即可。

JavaScript事件委托数据集属性dataset修改时间：2026-06-19 08:27:26