在js的点击事件中，我们经常会遇到this和e.target，这二者到底有什么分别呢？现在来做一个直观的对比分析。
<button id="btn" name="test">按钮</button>
<button id="btn1" name="test">按钮</button>
js测试代码
document.getElementById("btn").addEventListener("click", (e) => {
console.log(e.target);
console.log(e.target.innerHTML);
console.log(e.target.getAttribute("name"));
console.log(this);
console.log(this.innerHTML);
console.log(this.getAttribute("name"));
});
document.getElementById("btn1").addEventListener("click", function (e) {
console.log(e.target);
console.log(e.target.innerHTML);
console.log(e.target.getAttribute("name"));
console.log(this);
console.log(this.innerHTML);
console.log(this.getAttribute("name"));
});
在网页上先后点击btn和btn1按钮，F12查看输出内容：
结果一目了然：
1、e.target通常是在事件处理程序中使用的，它表示触发事件的元素。例如，如果你在一个按钮上设置了一个点击事件，那么当你点击这个按钮时，e.target将会指向这个按钮。它的主要用途是获取到事件发生的源头，以便于执行针对该元素的操作。
2、而this则是指向当前对象，它通常在对象的方法中使用。在事件处理程序中，如果你是在一个对象上设置的事件处理程序，那么this将会指向这个对象。例如，如果你有一个名为myObject的对象，并在其上设置了一个点击事件，那么在该事件处理程序中，this将会指向myObject。
3、如果是在非匿名函数中，其实二者指代的东西是一样的。而关于匿名函数可以查看这里：
如上例，在第一个按钮执行时，由于使用了匿名函数，this指向了window，因此是无法执行getAttribute("name")的，而当使用具名函数，二者输出基本一致。
如有漏洞，欢迎补充
【文章链接：】
