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

推荐答案

event.target 和 event.currentTarget 都与事件处理相关，但它们指向的是不同的 DOM 元素：

• event.target: 指向触发事件的最初的元素。它是事件“冒泡”路径上最开始触发事件的那个元素。

• event.currentTarget: 指向事件处理程序绑定的元素。也就是当前正在执行的事件监听器所附加的 DOM 元素。

简而言之，target 是事件的“起点”，而 currentTarget 是事件“旅程”中当前正在处理的元素。当事件冒泡时，target 始终保持不变，而 currentTarget 会随着事件处理程序执行的元素而变化。

本题详细解读

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

event.target

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

示例:

-- -------------------- ---- -------
---- ------------
  ------- ---------------- -----------
------

--------
  ----------------------------------------------------------- --------------- -
      ------------------- - --------------- ----------------- -- --------
      ------------------- - ---------------------- ------------------------ -- ---------
  ---

  ---------------------------------------------------------- --------------- -
      ------------------ - --------------- -----------------  -- --------
      ------------------ - ---------------------- ------------------------ -- --------
  ---

---------

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

1. 当 child 元素的事件监听器执行时：

   • event.target 指向 child (事件最初发生的地方)。
   • event.currentTarget 指向 child (监听器绑定到的元素)。

2. 当事件冒泡到 parent 元素的监听器执行时：

   • event.target 仍然指向 child (事件最初发生的地方)。
   • event.currentTarget 指向 parent (监听器绑定到的元素)。

event.currentTarget

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

应用场景:

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

示例 （事件委托）:

-- -------------------- ---- -------
--- ----------
  --- ------------------ ------
  --- ------------------ ------
  --- ------------------ ------
-----

--------
    --------------------------------------------------------- --------------- -
        --- ----------- - -------------
        ---------------------- --- ----- -
          -------------------- ------- --------------------------
          -------------------- --------- ------------------------ -- -- ----
        -
    ---
---------

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

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