การได้มาซึ่งองค์ประกอบเป้าหมายเมื่อเหตุการณ์แพร่กระจาย

สมมติว่าเรามีสององค์ประกอบ: div และย่อหน้า p ที่อยู่ภายใน div นั้น:

<div>
	<p></p>
</div>

มาดึงลิงก์ไปยัง div ของเราเก็บไว้ในตัวแปร:

let div = document.querySelector('div');

เพิ่มสไตล์บางอย่างให้กับแท็กของเรา:

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

สมมติว่าตอนนี้มีตัวจัดการเหตุการณ์คลิกติดอยู่บน div:

div.addEventListener('click', function() {
	console.log('click');
});

เนื่องจาก div ของเรามี padding ดังนั้นเมื่อเราคลิกที่ div เราอาจจะคลิก ที่ย่อหน้า หรือเราอาจจะคลิกในตำแหน่งที่ไม่มี ย่อหน้านั้น นั่นคือคลิกที่ตัว div โดยตรง

ในขณะที่ตัวจัดการเหตุการณ์คลิก this จะชี้ไปยังองค์ประกอบที่ตัวจัดการนั้นถูกติดตั้งเสมอ ในกรณีของเรา นี่คือ div ของเรา:

div.addEventListener('click', function() {
	console.log(this); // div
});

อย่างไรก็ตาม เราสามารถได้มาเฉพาะแท็ก ที่เหตุการณ์เกิดขึ้นจริงๆ ได้ สำหรับสิ่งนี้เรา สามารถดูว่าอะไรอยู่ใน event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // อาจเป็น div หรือย่อหน้า
});

สามารถแยกความแตกต่างระหว่างสองกรณีนี้ได้โดยใช้ เงื่อนไข:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('คลิกที่ div โดยตรง');
	}
	if (event.target.tagName === 'P') {
		console.log('คลิกที่ย่อหน้าโดยตรง');
	}
});

สามารถใช้ matches แทน tagName ได้:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('คลิกที่ div โดยตรง');
	}
	if (event.target.matches('p')) {
		console.log('คลิกที่ย่อหน้าโดยตรง');
	}
});

มีองค์ประกอบดังต่อไปนี้:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

ติดตั้งตัวจัดการเหตุการณ์คลิกบน div ใน ตัวจัดการนี้ จงพิจารณาว่าเหตุการณ์เกิดขึ้นในแท็กใด

ปรับเปลี่ยนงานก่อนหน้า จงทำให้ เมื่อคลิกที่ li จะมีเครื่องหมายอัศเจรีย์เพิ่มที่ท้าย และเมื่อคลิก ที่ ul จะแสดงข้อมูลเกี่ยวกับสิ่งนี้ในคอนโซล