Получение целевого элемента при всплытии событий

Пусть у нас есть два элемента: div и абзац p, лежащий внутри этого дива:

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

Получим ссылку на наш див в переменную:

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

Добавим нашим тегам некоторые стили:

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

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

Пусть теперь на див навешен обработчик клика:

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

Из-за того, что наш див имеет padding, то, когда мы кликаем на див, мы можем попасть по абзацу, а можем попасть в место, где этого абзаца нет, то есть непосредственно по диву.

При этом в обработчике клика this всегда будет указывать на тот элемент, на который навешан обработчик. В нашем случае это наш див:

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

Однако, мы можем получить именно тот тег, в котором случилось событие. Для этого мы можем посмотреть, что лежит в event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // или див, или абзац
});

Можно различить эти два варианта с помощью условий:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		alert('клик именно по диву');
	}
	if (event.target.tagName === 'P') {
		alert('клик именно по абзацу');
	}
});

Можно вместо tagName использовать matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		alert('клик именно по диву');
	}
	if (event.target.matches('p')) {
		alert('клик именно по абзацу');
	}
});

Даны следующие элементы:

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

Навешайте на див обработчик клика. В этом обработчике определите, в каком из тегов сработало событие.

Модифицируйте предыдущую задачу. Сделайте так, чтобы при клике на li, ей в конец добавлялся восклицательный знак, а при клике на ul - ей в конец добавлялась новая li.