Добивање на целниот елемент при појавување на настани

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

Наместо 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. Во овој обработувач определете, во кој од таговите се активирал настанот.

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