jQuery | event.target 属性与示例(1)

📌 相关文章

📜 jQuery | event.target 属性与示例(1)

📅 最后修改于: 2023-12-03 14:43:15.174000 🧑 作者: Mango

jQuery | event.target 属性与示例

在 jQuery 中，事件对象 event 提供了许多属性，其中一个常用的属性是 target。通过 event.target 属性，我们可以获取触发事件的元素。

语法

event.target

说明

event.target 返回一个 DOM 元素，即事件的目标元素。

举个例子，我们有一个 HTML 模板如下：

<div id="outer">
  <div id="inner">
    <button>Click me</button>
  </div>
</div>

我们可以使用以下代码获取被点击的元素：

$("#outer").on("click", function(event) {
  console.log(event.target); // 输出被点击的元素
});

在上面的代码中，我们使用了 jQuery 的 on() 方法来监听 #outer 元素的 click 事件。在事件处理程序中，我们使用了 event.target 属性来获取被点击的元素，并将结果打印到控制台中。

如果我们点击按钮，则会在控制台中看到以下日志：

<button>Click me</button>

示例

在以下示例中，我们创建了一个按钮并绑定了 click 事件。在事件处理程序中，我们使用了 event.target 属性来获取被点击的元素，并在页面上显示出来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery event.target 示例</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function() {
      $("button").on("click", function(event) {
        var target = event.target;
        $(target).addClass("clicked");
        $("#result").text("Clicked element is: " + target.tagName);
      });
    });
  </script>
  <style>
    .clicked {
      background-color: cyan;
    }
  </style>
</head>
<body>
  <button>Click me</button>
  <div id="result"></div>
</body>
</html>

在上面的代码中，我们将按钮绑定了 click 事件，并在事件处理程序中使用了 event.target 属性。我们向被点击的元素添加了 "clicked" class，并在页面上显示了被点击元素的标签名称。

在点击按钮之前，页面如下所示：

Click me

Clicked element is:

当我们点击按钮时，页面将变为：

Click me

Clicked element is: BUTTON

此时，按钮将显示为通过 "clicked" class 添加的背景颜色。