jQuery event.target|极客教程

jQuery event.target

在jQuery中，通过event.target属性可以获取触发事件的元素。这在处理事件委托和事件代理时非常有用。本文将详细介绍jQuery event.target的用法及示例代码。

event.target的基本用法

当事件发生时，event.target属性返回触发事件的DOM元素。例如，当用户点击按钮时，event.target会返回该按钮的DOM元素。通过event.target可以方便地获取到用户操作的元素，从而进行相应的操作。

下面是一个简单的示例代码，演示了event.target的基本用法：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.target 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="btn">点击我</button>

<script>
   $(document).ready(function() {$ ("#btn").click(function(event) {
      console.log(event.target);
    });
  });
</script>

</body>
</html>

在上面的示例中，当用户点击按钮时，控制台会打印出按钮的DOM元素，即<button id="btn">点击我</button>。这说明event.target返回的是触发事件的元素。

事件委托和event.target

事件委托是指将事件处理程序绑定到一个父级元素上，利用事件冒泡原理，在父级元素上监听子元素触发的事件。通过event.target可以在父级元素上准确地获取到子元素，从而实现事件委托的功能。

下面是一个事件委托的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>事件委托示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
   $(document).ready(function() {$ ("#list").on("click", "li", function(event) {
      console.log($(event.target).text());
    });
  });
</script>

</body>
</html>

在上面的示例中，当用户点击列表中的任意一项时，控制台会打印出被点击元素的文本内容，即Item 1、Item 2或Item 3。

event.target与事件代理

事件代理是一种高效的事件处理方式，利用事件冒泡原理将事件处理程序绑定到父级元素，根据event.target的不同来执行相应的操作。通过事件代理，可以减少事件处理程序的数量，提升性能。

下面是一个事件代理的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>事件代理示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
   $(document).ready(function() {$ ("#list").on("click", function(event) {
      if ( $(event.target).is("li")) { console.log($ (event.target).text());
      }
    });
  });
</script>

</body>
</html>

在上面的示例中，当用户点击列表中的任意一项时，控制台会打印出被点击元素的文本内容，同样是Item 1、Item 2或Item 3。