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 擴充套件中，在瀏覽器中開啟，然後檢視結果。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe