在學習事件對象的時候，總是認為target和this是一樣的，直到後來才發現兩者的區別還是挺大的，今天就帶大家一起來看看。
1.當觸發物件與綁定物件一致時
<!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 class="list">
<li class="itm">item1</li>
<li class="itm">item2</li>
<li class="itm">item3</li>
<li class="itm">item4</li>
<li class="itm">item5</li>
</ul>
<script>
const li=document.querySelector("ul li:nth-of-type(4)");
console.log(li);
li.addEventListener("click",function(e){
console.log(e.target);
console.log(this);
});
</script>
</body>
</html> 點選item4這個li後，兩者回傳如下：
#2.當觸發物件與綁定物件不一致時
<!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 class="list">
<li class="itm">item1</li>
<li class="itm">item2</li>
<li class="itm">item3</li>
<li class="itm">item4</li>
<li class="itm">item5</li>
</ul>
<script>
const ul=document.querySelector("ul");
console.log(ul);
ul.addEventListener("click",function(e){
console.log(e.target);
console.log(this);
});
</script>
</body>
</html> 點選item4這個li後，輸出如下：
#3.總結：
target傳回的是事件觸發物件
this 回傳的是事件綁定物件
#推薦：《2021年js面試題目及答案（大總結）》
以上是Javascript中事件物件的target和this的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
