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