องค์ประกอบเหตุการณ์ในอ็อบเจ็กต์ Event ใน JavaScript

อ็อบเจ็กต์ Event ยังอนุญาตให้รับ องค์ประกอบที่เหตุการณ์เกิดขึ้น องค์ประกอบนี้ อยู่ในคุณสมบัติ target ทำไมถึงจำเป็น ในเมื่อองค์ประกอบนี้อยู่ใน this แล้ว?

ความจริงก็คือ this จะมีองค์ประกอบ ที่เหตุการณ์ถูกผูกไว้ เสมอ ส่วนคุณสมบัติ target คือองค์ประกอบที่ถูกคลิกจริงๆ องค์ประกอบจริงนี้อาจตรงกับ this หรืออาจไม่ตรงกัน

ลองดูตัวอย่าง สมมติว่าเรามี div และภายในมีย่อหน้า:

html<div id="elem">
  <p>ข้อความ</p>
</div>

ลองผูกเหตุการณ์กับ div แต่คลิกที่ย่อหน้า แน่นอนว่าการคลิกที่ย่อหน้านั้น เป็นทั้งการคลิกที่ div ด้วย เนื่องจาก ย่อหน้าอยู่ใน div ของเรา

ในกรณีที่อธิบาย คุณสมบัติ target จะมีแท็กสุดท้าย ที่เหตุการณ์เกิดขึ้น นั่นคือย่อหน้า ไม่ใช่ div มาดูกัน:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  console.log(event.target); // จะแสดงย่อหน้าของเรา
  console.log(this);         // จะแสดง div ของเรา
});

cssul {
  padding: 30px;
  border: 1px solid red;
}
li {
  list-style-type: none;
  margin-bottom: 20px;
  border: 1px dashed black;
}

html<ul id="elem">
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
</ul>