Добијање циљног елемента приликом догађаја

Нека имамо два елемента: div и параграф p, који се налази унутар тог div-a:

<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 додат click догађај:

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

Због тога што наш div има padding, када кликнемо на div, можемо погодити параграф, или можемо погодити место где тог параграфа нема, односно директно на div.

При томе у click догађају 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('клик управо на параграф');
	}
});

Можемо уместо tagName користити matches:

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 click догађај. У овом догађају одредите, у ком од тагова се активирао догађај.

Модификујте претходни задатак. Направите тако да при клику на li, њој на крај додајте узвичник, а при клику на ul у конзолу испише информација о томе.