JavaScript 中的事件目標

JavaScript 中的事件目標

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

JavaScript 中的事件目標

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

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

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

  1. 我們可以得到觸發事件的 element
  2. 我們可以訪問 element 屬性。
  3. 我們可以很容易地修改 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 Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 使用 JavaScript 模擬點選
  • 在 JavaScript 中檢測鍵盤輸入事件
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • JavaScript 中的文字框事件