请解释 event.target 和 event.currentTarget 的区别。-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

理解 event.target 和 event.currentTarget 的关键在于理解 JavaScript 事件的冒泡机制。当一个 DOM 元素上发生事件（例如点击）时，该事件首先会从触发它的元素开始，然后“冒泡”到其父元素，祖父元素，以此类推，直到到达 document 对象。

`event.target`

event.target 总是指向事件最开始发生的那个 DOM 元素。
即使事件冒泡到其父元素，event.target 也不会改变。它始终指向最初触发事件的元素。

示例:

// www.javascriptcn.com code example
<div id="parent">
  <button id="child">Click Me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function(event) {
      console.log('Parent - event.target:', event.target.id); // 输出：Child
      console.log('Parent - event.currentTarget:', event.currentTarget.id); // 输出：parent
  });

  document.getElementById('child').addEventListener('click', function(event) {
      console.log('Child - event.target:', event.target.id);  // 输出：Child
      console.log('Child - event.currentTarget:', event.currentTarget.id); // 输出：child
  });

</script>

在这个例子中，如果你点击按钮（child），会触发两个 click 事件监听器：一个在 child 元素上，另一个在其父元素 parent 上。

当 child 元素的事件监听器执行时：
- event.target 指向 child (事件最初发生的地方)。
- event.currentTarget 指向 child (监听器绑定到的元素)。
当事件冒泡到 parent 元素的监听器执行时：
- event.target 仍然指向 child (事件最初发生的地方)。
- event.currentTarget 指向 parent (监听器绑定到的元素)。

`event.currentTarget`

event.currentTarget 指向当前正在执行事件处理程序的元素。
在冒泡阶段，随着事件处理程序在不同的元素上执行，event.currentTarget 的值也会变化。

应用场景:

事件委托: 当你想要在父元素上监听多个子元素的事件，并根据点击的子元素执行不同的操作时，可以使用 event.target 来识别被点击的具体子元素。
通用事件处理: 你可以使用 event.currentTarget 来引用你绑定的事件处理程序的元素，无需使用额外的变量或 this 上下文。
避免 this 指向问题：使用 currentTarget 可以避免 this 指向混淆，尤其是使用了箭头函数时，箭头函数中 this 绑定到父级作用域的 this 而非事件触发元素。

示例（事件委托）:

// www.javascriptcn.com code example
<ul id="list">
  <li data-item="1">Item 1</li>
  <li data-item="2">Item 2</li>
  <li data-item="3">Item 3</li>
</ul>

<script>
    document.getElementById('list').addEventListener('click', function(event) {
        let clickedItem = event.target;
        if(clickedItem.tagName === 'LI') {
          console.log('Clicked Item:', clickedItem.dataset.item);
          console.log('Current Target:', event.currentTarget.id); // 输出 list
        }
    });
</script>

在这个例子中，通过给父级 ul 绑定事件，利用 event.target 可以准确获取点击的 li 元素，而 event.currentTarget 始终指向 ul。

理解 event.target 和 event.currentTarget 的区别对于编写高效和健壮的 JavaScript 代码至关重要，尤其是在处理事件委托和复杂的 DOM 结构时。

请解释 event.target 和 event.currentTarget 的区别。

推荐答案

本题详细解读

event.target

event.currentTarget

`event.target`

`event.currentTarget`