我们先来看一个代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
ul.addEventListener('click', function(e) {
console.log(this);
})
</script>
</body>
</html>随便点击一个li元素的话打印的是ul。但是看下面这个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
ul.addEventListener('click', function(e) {
console.log(e.target); //返回的是li
})
</script>
</body>
</html>这个随便点击一个li元素返回的是点击的那个li元素。
简洁地概括就是this返回的是绑定事件的元素，e.target返回的是触发事件的对象，但是为什么li没有绑定事件反而还打印出来了呢？原因是因为li虽然没注册，但ul注册事件了，因为冒泡li没执行但执行ul的事件，ul里的执行函数有e.target，指向的就是li。