jQuery | event.currentTarget 属性(1)

📌 相关文章

📜 jQuery | event.currentTarget 属性(1)

📅 最后修改于: 2023-12-03 15:16:47.178000 🧑 作者: Mango

jQuery | event.currentTarget 属性

简介

event.currentTarget 是 jQuery 中的一个属性，用于获取当前事件被绑定到的 DOM 元素。在事件处理函数内部，event.currentTarget 指向触发该事件的元素。

使用方法

以下是获取 event.currentTarget 的几种常见方法：

1. 使用 `event.currentTarget`

$('#myElement').click(function(event) {
  var currentTarget = event.currentTarget;
  console.log(currentTarget);
});

在上面的代码中，当 #myElement 元素被点击时，会在浏览器的控制台输出当前的 DOM 元素。

2. 使用 `$(this)`

$('#myElement').click(function() {
  var currentTarget = $(this);
  console.log(currentTarget);
});

在上述代码中，$(this) 来代替 event.currentTarget 获取当前元素。

注意事项

event.currentTarget 返回的是一个 DOM 元素，若需要使用 jQuery 的方法，需要将其包装成 jQuery 对象，例如 $(event.currentTarget)。
在使用 event.currentTarget 时，需要注意事件冒泡的影响。如果当前元素是事件的直接目标，则 event.currentTarget 与 event.target 相等；如果当前元素是事件的父级元素，并且事件通过冒泡机制传递给了该父级元素，则 event.currentTarget 会指向该父级元素，而 event.target 会指向触发事件的子元素。

示例

以下是一个使用 event.currentTarget 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.myButton').click(function(event) {
        var currentTarget = $(event.currentTarget);
        console.log(currentTarget.text());
      });
    });
  </script>
</head>
<body>
  <button class="myButton">按钮1</button>
  <button class="myButton">按钮2</button>
  <button class="myButton">按钮3</button>
</body>
</html>

以上代码为页面中的多个按钮添加了相同的点击处理函数，当按钮被点击时，会在控制台输出按钮的文本内容。

参考链接

jQuery Documentation