e.currentTarget === this
e.target === 你点击的元素,你点击的是谁,e.target 就是谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
// e.target 就是你点击的元素,你点的谁,谁就是target,没有给li绑定事件,因为事件冒泡,点击ul,其实是从li 冒向了ul,所以target = li
// e.currentTarget 就是自己
const ul = document.getElementsByTagName('ul')[0]
const li = document.getElementsByTagName('li')[0]
ul.onclick = function (e) {
console.log(e.target, e.currentTarget) // 记住,要在li上面触发!e.target === li, e.currentTarget === ul
}
li.onclick = function (e) {
console.log(e.target === e.currentTarget) // target === li, e.currentTarget === li
}
</script>
</body>
</html>