博客

jQuery event.target属性

  • Post category:jquery

jQuery event.target属性用于获取触发事件的DOM元素。该属性通常用于在事件处理程序中确定事件的来源。

以下是jQuery event.target属性的详细攻略：

语法

event.target

参数

无

示例1：获取触发事件的DOM元素

以下示例演示了如何使用jQuery event.target属性获取触发事件的DOM元素：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.target Property</title>
  <script src="https://code.jquery.com/jquery-.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <button id="myButton">Click me</button>
  </div>

  <script>
    $('#myDiv').on('click', function(event) {
      alert('Event target: ' + event.target.id);
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个div元素和一个按钮，并在div元素上绑定了一个click事件。在事件处理程序中，我们使用jQuery event.target`属性获取触发事件的DOM元素，并弹出一个提示框，显示事件目标的ID。

示例2：使用jQuery event.target属性进行事件委托

以下示例演示了如何使用jQuery event.target属性进行事件委托：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.target Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    $('#myList').on('click', 'li', function(event) {
      alert('Clicked item: ' + $(event.target).text());
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个无序列表，并在列表上绑定了一个click事件。在事件处理程序中，我们使用jQuery event.target属性获取触发事件的DOM元素，并弹出一个提示框，显示被单击的列表项的文本。由于我们使用了事件委托，因此只需在列表上绑定一个事件处理程序，而不是在每个列表项上都绑定一个事件处理程序。

注意事项

  • jQuery event.target属性只能在事件处理程序中使用。
  • jQuery event.target属性返回的是一个DOM元素，而不是jQuery对象。如果需要使用jQuery方法，需要将转换为jQuery对象，例如$(event.target)。
Tags: