Получаване на целевия елемент при излитане на събития

Нека имаме два елемента: 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 в конзолата да се извежда информация за това.