Získání cílového elementu při propagaci událostí

Předpokládejme, že máme dva elementy: div a odstavec p, který se nachází uvnitř tohoto divu:

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

Získáme odkaz na náš div do proměnné:

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

Přidejme našim tagům nějaké styly:

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

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

Nyní přidejme na div obslužnou rutinu kliknutí:

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

Protože náš div má padding, když klikneme na div, můžeme kliknout na odstavec, nebo můžeme kliknout na místo, kde tento odstavec není, tedy přímo na div.

Při tom this v obslužné rutině kliknutí bude vždy ukazovat na element, na který je obslužná rutina připojena. V našem případě je to náš div:

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

Nicméně, můžeme získat právě ten tag, ve kterém událost nastala. K tomu můžeme zjistit, co je v event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // buď div, nebo odstavec
});

Tyto dvě varianty lze rozlišit pomocí podmínek:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kliknutí přímo na div');
	}
	if (event.target.tagName === 'P') {
		console.log('kliknutí přímo na odstavec');
	}
});

Místo tagName lze použít matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kliknutí přímo na div');
	}
	if (event.target.matches('p')) {
		console.log('kliknutí přímo na odstavec');
	}
});

Jsou dány následující elementy:

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

Připojte na div obslužnou rutinu kliknutí. V této obslužné rutině určete, ve kterém z tagů událost nastala.

Upravte předchozí úlohu. Udělejte to tak, aby při kliknutí na li se na její konec přidal vykřičník, a při kliknutí na ul se do konzole vypisovala informace o tom.