JavaScript 中怎么用 currentTarget 动态修改当前响应事件的样式-js教程-PHP中文网

currenttarget 指向绑定事件监听器的元素，用于精准操作响应事件的元素；可通过 style 直接设内联样式，或用 classlist 增删类名实现更灵活、可维护的样式控制，在事件委托中需用 closest() 定位实际目标元素。

javascript 中怎么用 currenttarget 动态修改当前响应事件的样式

currentTarget 是事件对象（event）的一个只读属性，指向**当前绑定事件监听器的那个元素**（即事件监听器实际挂载的目标），它和 target（真正触发事件的元素，可能为子元素）不同。利用 event.currentTarget，可以精准地修改“正在响应事件”的那个元素的样式，尤其在事件委托或多个同类元素共用一个监听器时非常实用。

直接修改 currentTarget 的 style 属性

最简单的方式是通过 event.currentTarget.style 设置内联样式：

适用于快速、一次性样式调整（如 hover 效果、临时高亮）
注意：设置的是行内样式，优先级高于 CSS 类，但会覆盖其他已设的内联样式

示例：点击任意按钮，仅该按钮变红背景

（HTML）

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

（JS）

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.currentTarget.style.backgroundColor = 'red';
    e.currentTarget.style.color = 'white';
  });
});

切换 class 类名（推荐方式）

相比直接操作 style，用 classList 增删 CSS 类更灵活、可维护性更强，也便于复用样式规则：

OpenJDK 24

下载

避免样式硬编码，利于主题切换和后期维护
支持过渡动画（transition）、伪类等完整 CSS 能力
使用 e.currentTarget.classList.toggle() 可实现开关效果

示例：点击按钮添加高亮类，再次点击移除

（CSS）

.active {
  background-color: #007bff;
  color: white;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

（JS）

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.currentTarget.classList.toggle('active');
  });
});

在事件委托中准确操作被点击的容器

当使用父元素监听子元素事件（如 ul 监听所有 li 点击）时，event.target 可能是子节点（如 span 或图标），而 event.currentTarget 始终是绑定监听器的父元素（如 ul）。若你想操作的是“被点击的 li”，就不能直接用 currentTarget，而应先定位目标 li：

正确做法：用 e.target.closest('li') 找到最近的 li，再改它的样式
e.currentTarget 此时是 ul，一般不用于样式修改，除非你想统一动整个列表

示例：点击任意列表项，仅该项加边框

const list = document.querySelector('ul');
list.addEventListener('click', function(e) {
  const clickedItem = e.target.closest('li');
  if (clickedItem) {
    clickedItem.style.border = '2px solid #28a745';
  }
});