在前端开发中，我们常常需要处理用户与页面之间的交互。当用户点击一个元素时，我们可以通过JavaScript获取该事件对象，并从中获取有关事件的信息。其中包括事件的目标元素以及当前正在处理事件的元素。这两个属性分别是target和currentTarget。
target属性
target属性返回触发事件的元素。也就是说，如果用户单击了一个链接或按钮，那么target属性就会返回该链接或按钮的DOM元素。
下面是一个示例代码：
--------- -----
------
------
------------- -- ---------------------
-------
------ -
-------- -----
----------------- -----
------- -----
-
--------
-------
------
------- ------------------- ------------
--------
--- -------- - ------------------------------------
---------------------------------- --------------- -
-------------------- -- --------- ------------------- ------------
---
---------
-------
-------当用户单击"Click me!"按钮时，target属性将返回该按钮的DOM元素。
currentTarget属性
currentTarget属性则返回当前正在处理该事件的元素。这通常与事件处理程序相关联。例如，在上面的示例代码中，事件处理程序是click事件。因此，在事件处理程序内部，currentTarget属性返回添加事件处理程序的元素。
下面是一个示例代码，演示如何使用currentTarget属性：
--------- -----
------
------
------------- -- ---------------------
-------
------ -
-------- -----
----------------- -----
------- -----
-
--------
-------
------
------- ------------------- ------------
--------
--- -------- - ------------------------------------
---------------------------------- --------------- -
--------------------------- -- --------- ------------------- ------------
---
---------
-------
-------与上面示例不同的是，在事件处理程序内部，我们使用了currentTarget属性。因此，在单击按钮时，currentTarget属性将返回该按钮的DOM元素。
区别
虽然target和currentTarget属性都返回DOM元素，但它们之间有一些重要的区别。当事件发生时，target属性指向最初触发事件的元素，而currentTarget属性则指向当前正在处理事件的元素。在大多数情况下，这两个属性具有相同的值，但在事件冒泡期间，它们可能会不同。事件冒泡是指事件从目标元素向上冒泡到文档根节点。
在下面的示例中，我们演示了如何使用事件冒泡，并比较了target和currentTarget属性：
--------- -----
------
------
------------- -- ---------------------
-------
------ -
-------- -----
----------------- -----
------- -----
-
--------
-------
------
---- -----------
---- -----------
------- ------------------- ------------
------
------
--------
--- ----- - ---------------------------------
--- ----- - ---------------------------------
--- -------- - ------------------------------------
------------------------------- --------------- -
------------- - - -------------------- - -- - - -----------------------------
---
------------------------------- --------------- -
------------- - - -------------------- - -- - - -----------------------------
---
---------------------------------- --------------- -
-------------- - - -------------------- - -- - - -----------------------------
---
---------
-------
-------在这个例子中，我们在三
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10365