JavaScript 事件：目标与 currentTarget

在 JavaScript 中，事件是很常见的概念。当事件被触发时，会涉及到两个重要的属性：目标和 currentTarget。

目标（target）

目标是事件被触发时的实际元素。它是事件的 原始目标。通常，我们会给目标元素绑定事件的监听器，来响应这个事件。

例如：

const button = document.querySelector('button');

button.addEventListener('click', function(event) {
  console.log(event.target); // <button>按钮</button>
});

在这个例子中，我们给 button 元素绑定了 click 事件监听器，当用户点击按钮时，我们会得到该按钮元素作为事件目标。

currentTarget

currentTarget 是事件 当前处理 的元素，通常是我们给其绑定事件监听器的元素。如果事件在目标元素上发生，那么 currentTarget 和 target 就是相同的。但如果事件是在目标元素的子元素上发生，那么 currentTarget 就不会是目标元素了，而是最近的被绑定监听器的元素。

例如：

<div class="outer">
  <div class="inner">
    <button>按钮</button>
  </div>
</div>

const outer = document.querySelector('.outer');
const button = document.querySelector('button');

outer.addEventListener('click', function(event) {
  console.log(event.currentTarget); // <div class="outer">
});

button.addEventListener('click', function(event) {
  console.log(event.currentTarget); // <button>按钮</button>
});

在这个例子中，我们给 .outer 元素绑定了 click 事件监听器，并同时给按钮元素绑定了 click 事件监听器。当点击按钮时，event.currentTarget 会是最近被绑定监听器的元素，也就是 .outer 元素。

总结

了解事件的目标和 currentTarget 可以帮助我们更好地理解浏览器中的事件模型。在开发过程中，我们经常需要同时绑定多个元素的事件监听器，这时候了解当前正在处理事件的元素，可以更容易地判断事件的来源以及执行相应的操作。