对于前端开发人员来说，e.target 和 this 的区别是什么？

2023-12-10 15:24:31

在前端开发中，e.target 和 this 是两个经常会遇到的属性。它们都可以用来获取触发事件的元素，但它们之间存在一些差异。

e.target

e.target 是一个只读属性，它返回的是触发事件的元素。例如，如果我们有一个按钮，当点击它时触发一个事件，那么 e.target 就指向这个按钮。

<button onclick="myFunction()">Click me</button>

<script>
function myFunction(e) {
  console.log(e.target); // Output: <button onclick="myFunction()">Click me</button>
}
</script>

this

this 是一个上下文相关的属性，它返回的是当前执行代码的对象。在事件处理函数中，this 指向的是绑定事件的元素。例如，如果我们有一个按钮，当点击它时触发一个事件，那么 this 就指向这个按钮。

<button onclick="this.style.color = 'red'">Click me</button>

<script>
function myFunction() {
  console.log(this); // Output: <button onclick="this.style.color = 'red'">Click me</button>
}
</script>

区别

e.target 和 this 之间的主要区别在于，e.target 指向的是触发事件的元素，而 this 指向的是绑定事件的元素。这在某些情况下可能会导致不同的结果。

例如，如果我们有一个按钮，当点击它时触发一个事件，并且这个按钮被嵌套在另一个元素中，那么 e.target 就指向按钮，而 this 就指向按钮的父元素。

<div>
  <button onclick="this.style.color = 'red'">Click me</button>
</div>

<script>
function myFunction(e) {
  console.log(e.target); // Output: <button onclick="this.style.color = 'red'">Click me</button>
  console.log(this); // Output: <div>...</div>
}
</script>

使用

在实际开发中，我们可以根据需要使用 e.target 和 this 来获取触发事件的元素。例如，如果我们要改变触发事件的元素的样式，那么我们可以使用 e.target。

<button onclick="e.target.style.color = 'red'">Click me</button>

<script>
function myFunction() {
  console.log(e.target); // Output: <button onclick="e.target.style.color = 'red'">Click me</button>
}
</script>

如果我们要获取触发事件的元素的父元素，那么我们可以使用 this。

<div>
  <button onclick="this.style.color = 'red'">Click me</button>
</div>

<script>
function myFunction() {
  console.log(this); // Output: <div>...</div>
}
</script>