target 事件属性

在前端开发中，我们经常会遇到需要处理事件的情况。事件是用户与网页交互时触发的动作，例如点击、鼠标移动等。在处理事件时，我们经常会用到 target 事件属性。

什么是 target 事件属性？

target 是事件对象的一个属性，它指向触发事件的元素。在事件处理函数中，我们可以通过访问 event.target 来获取触发事件的元素，从而对该元素进行操作。

如何使用 target 事件属性？

1. 点击事件

当用户点击一个元素时，我们可以通过 event.target 来获取被点击的元素。例如，我们可以通过点击按钮来改变按钮的文本内容：

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(event) {
    event.target.innerText = 'Button clicked!';
  });
</script>

在上面的示例中，当用户点击按钮时，按钮的文本内容会被改变为 "Button clicked!"。

2. 鼠标移入事件

当用户将鼠标移入一个元素时，我们同样可以通过 event.target 来获取被移入的元素。例如，我们可以在鼠标移入一个链接时改变链接的颜色：

<a id="myLink" href="#">Hover over me</a>
<script>
  const link = document.getElementById('myLink');
  link.addEventListener('mouseover', function(event) {
    event.target.style.color = 'red';
  });
</script>

在上面的示例中，当用户将鼠标移入链接时，链接的颜色会变为红色。

3. 事件委托

事件委托是一种常见的优化技术，通过将事件处理程序添加到父元素，来减少事件处理程序的数量。在事件处理函数中，我们可以利用 event.target 来判断触发事件的具体子元素。例如，我们可以通过事件委托来处理一个列表中的点击事件：

// www.javascriptcn.com code example
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const list = document.getElementById('myList');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      event.target.style.backgroundColor = 'lightblue';
    }
  });
</script>

在上面的示例中，当用户点击列表中的某一项时，该项的背景色会变为浅蓝色。

总结

通过使用 target 事件属性，我们可以方便地获取触发事件的元素，并对其进行操作。无论是处理点击事件、鼠标移入事件还是事件委托，target 都能帮助我们更好地处理事件。希望本文能帮助你更好地理解和运用 target 事件属性。