不同的目標*目標屬性是什麼？

Question

在MouseEvent類有多個*目標事件：

• target
• currentTarget
• relatedTarget

什麼是他們的MouseEvent的背景目的是什麼？

Answer 1

這些屬性等同於JavaScript鼠標事件。 JavaScript事件遍歷DOM（稱爲「冒泡」）。 target是最初派發事件的對象。 currentTarget是您的事件處理程序已附加到的對象。

例

你有這樣的HTML結構：

<ul id="list"> 
    <li>Entry 1</li> 
    <li>Entry 2</li> 
</ul> 

，並添加一個單擊處理程序到<ul>元素（無論是通過JavaScript或飛鏢，這個概念是一樣的）。當你點擊「條目2」時，你的點擊處理程序將被調用（因爲事件「冒泡」）。 target將爲<li>元素，而currentTarget將爲<ul>元素。您必須使用哪一個取決於您想要在處理程序中執行的操作 - 例如，您可以通過使用target或整個列表通過使用currentTarget來隱藏「條目2」本身。

relatedTarget引用的元素取決於您的MouseEvent的類型 - 列表可以在這裏找到：event.relatedTarget。在上面的例子中，它將是null，因爲點擊事件沒有任何相關的目標。

相關MDN鏈接： event.currentTarget， event.target