JavaScript事件对象属性e.target和this的区别

前言：

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
   其中事件对象属性e.target，它和this的指向有所不同。

案例：

HTML:

<div>div     <span>span</span> </div> 

CSS:

div {     width: 100px;     height: 100px;     background-color: red; }  span {     display: block;     width: 50px;     height: 50px;     background-color: yellow; } 

预览：

JS:

var div = document.querySelector('div'); div.addEventListener('click', function(e) {     console.log(this);  // 给div绑定了事件,那么this就指向div     console.log(e.target);  // e.target指向点击的那个对象 }) 

实现结果：

点击div：

this返回div标签，e.target返回div标签

点击span：

this返回div标签，e.target返回span标签

分析：

1. 因为div绑定了点击事件，那么this返回的都是div；
2. 点击div，e.target返回div；点击span，e.target返回span。

总结：

1. this返回的是绑定事件的对象（元素）；e.target返回的是触发事件的对象（元素）。
2. 简单来说，this：哪个元素绑定了这个点击事件，就返回哪个元素；e.target：点击了哪个元素，就返回哪个元素。