jQuery中event.target和this的区别详解

1. event.target和this的概念

event.target和this都是jQuery中经常使用的两个概念，它们在事件处理函数中具有不同的含义。

event.target指的是触发了当前事件的具体元素，而this指的则是绑定事件的元素。

2. event.target和this的示例说明

示例一：点击父元素弹出子元素内容

下面的代码演示了在点击#father元素的时候，弹出其包含的#son元素的内容：

<div id="father">
  Father
  <div id="son">Son</div>
</div>

$(document).ready(function() {
  $('#father').click(function(event) {
    console.log(event.target);   // 输出：#son
    console.log(this);          // 输出：#father
    alert($('#son').text());
  });
});

在上面的代码中，当点击#son元素的时候，event.target会指向#son，而this则会指向#father。

示例二：移除列表项

下面的代码演示了在点击列表项的时候，移除自身的效果：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$(document).ready(function() {
  $('li').click(function(event) {
    console.log(event.target);   // 输出：当前点击的li元素
    console.log(this);          // 输出：当前点击的li元素
    $(this).remove();
  });
});

在上面的代码中，当点击列表项<li>的时候，event.target和this都会指向当前点击的<li>元素。然后我们调用了remove()方法，移除了自身。

3. 总结

• event.target和this在事件处理函数中有不同的含义。
• event.target表示当前事件的具体元素，而this是绑定事件的元素。
• 使用event.target可以获得更具体的元素信息，而使用this则可以方便地获取绑定事件的元素的信息。