JavaScript 中的事件目标
在本文中，我们将学习 JavaScript 源代码中的 event.target 属性以及该属性在 JavaScript 网页中的好处。
event.target属性有助于查找用于触发事件的 HTML 元素的名称。例如，如果我们从一个 HTML 元素点击事件中调用一个函数，我们可以确定指定的元素名称来触发并调用一个函数。
为了获得该属性，我们调用 event.target 并将其存储在类似 let variable = event.target 的变量中。现在，我们可以使用该变量获得多个 event.target 属性。
它返回对发生事件的对象的引用。借助事件的 target 属性，我们可以执行以下任务。
现代网络浏览器完全支持这个 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 扩展中，在浏览器中打开，然后查看结果。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
