Sihtelemendi saamine sündmuste levimisel

Olgu meil kaks elementi: div ja lõik p, mis asub selle divi sees:

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

Saame viite oma divile muutujasse:

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

Lisame oma siltidele mõned stiilid:

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

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

Olgu nüüd divile pandud kliki käitleja:

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

Sellepärast, et meie divil on padding, siis kui me klõpsame divil, võime tabada lõiku, või võime tabada kohta, kus seda lõiku pole, see tähendab otse divile.

Samal ajal kliki käitlejas this näitab alati sellele elemendile, millele käitleja on pandud. Meie puhul see on meie div:

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

Siiski, me saame saada just selle sildi, kus sündmus toimus. Selleks saame vaadata, mis asub event.target sees:

div.addEventListener('click', function(event) {
	console.log(event.target); // kas div või lõik
});

Neid kaht varianti saab eristada kasutades tingimusi:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klõps just divile');
	}
	if (event.target.tagName === 'P') {
		console.log('klõps just lõigule');
	}
});

tagName asemel saab kasutada matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klõps just divile');
	}
	if (event.target.matches('p')) {
		console.log('klõps just lõigule');
	}
});

Antud on järgmised elemendid:

<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;
}

Pange divile kliki käitleja. Selles käitlejas määrake kindlaks, millises sildis sündmus töötas.

Modifitseerige eelmist ülesannet. Tehke nii, et li klõpsamisel lisataks selle lõppu hüüumärk, ja ul klõpsamisel prinditaks konsooli informatsioon sellest.