事件对象中e.target和this的区别

区别

• e.target返回的是触发事件的对象（元素）
• this返回的是绑定事件的对象（元素）

代码

<div>123</div>
复制代码

如果单纯只绑定了一个元素，没有嵌套，那么两者输出看上去没什么区别

var div = document.querySelector('div');
div.addEventListener('click', function(e) {
    console.log(e.target);
    console.log(this);
})
复制代码

运行结果

但是，如果有嵌套，比如这样,那就很容易看出区别了

<ul>
   <li>123</li>
   <li>123</li>
   <li>123</li>
</ul>
复制代码

var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
   console.log(e.target);
   console.log(this);
})
复制代码

运行结果

在这里因为是点击li触发的点击事件，所以e.target会返回li；但因为是ul绑定的点击事件，所以this返回的是ul。