JavaScript 中的事件目标

Muhammad Muzammil Hussain 2022年7月12日 JavaScript JavaScript Event
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 扩展中，在浏览器中打开，然后查看结果。

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe

相关文章 - JavaScript Event