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

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

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

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

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

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

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

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

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

สมมติว่าคุณมีรายการ ul พร้อมแท็ก li:

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

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

ผูกตัวจัดการคลิกกับแท็ก ul ในตัวจัดการนี้ ตรวจสอบโดยใช้คุณสมบัติ tagName ว่าคลิกที่แท็กใด หากคลิกที่ แท็ก li - ให้เพิ่มเครื่องหมายอัศเจรีย์ ที่ท้ายข้อความของแท็กนั้น และหากคลิก ที่แท็ก ul - ให้แสดงข้อมูล เกี่ยวกับสิ่งนี้ในคอนโซล