JavaScript 中的事件目標

Muhammad Muzammil Hussain 2022年7月12日

JavaScript JavaScript Event

在本文中，我們將學習 JavaScript 原始碼中的 event.target 屬性以及該屬性在 JavaScript 網頁中的好處。

JavaScript 中的事件目標

event.target 屬性有助於查詢用於觸發事件的 HTML 元素的名稱。例如，如果我們從一個 HTML 元素點選事件中呼叫一個函式，我們可以確定指定的元素名稱來觸發並呼叫一個函式。

為了獲得該屬性，我們呼叫 event.target 並將其儲存在類似 let variable = event.target 的變數中。現在，我們可以使用該變數獲得多個 event.target 屬性。

它返回對發生事件的物件的引用。藉助事件的 target 屬性，我們可以執行以下任務。

我們可以得到觸發事件的 element。
我們可以訪問 element 屬性。
我們可以很容易地修改 element 的一些屬性。

現代網路瀏覽器完全支援這個 target 事件屬性。

基本語法：

var property = event.target;
var elementName = property.tagName

在下面的示例中，我們將一起使用 event.target 物件和 tagName 屬性來確定用於觸發點選事件並呼叫宣告的函式的元素名稱。

例子：

<!DOCTYPE html>
<html>
   <body onclick="myFunction(event)">
      <h1 style="color:blueviolet">DelftStack Learning</h1>
      <h3>JavaScript Target event property</h3>
      <p>Click on button on this web page in this document to find out the element name which is used to triggered the event.</p>
      <button>Click here</button>
      <p id="myPara"></p>
      <script>
         function myFunction(event) {
             var myVariable = event.target; // get tagert event property
             document.getElementById("myPara").innerHTML = "Event triggered by a " + myVariable.tagName + " element";
         }
      </script>
   </body>
</html>

在上面的 HTML 網頁原始碼中，我們使用了 HTML 元素按鈕來觸發事件並呼叫 myFunction。在該函式中，我們必須獲取一個事件作為引數，使用變數 myVariable，並使用該事件儲存屬性。

然後，我們簡單地使用預設的 document.getElementById('myPara').innerHTML 將字串文字分配給段落元素。我們已經在正文中建立了段落元素並分配了 ID myPara。

我們將標籤名稱與 myVariable.tagName 連線起來，以在段落中顯示元素名稱。你可以將上述原始碼儲存在 HTML 擴充套件中，在瀏覽器中開啟，然後檢視結果。

JavaScript 中的事件目標

相關文章 - JavaScript Event