Атрыманне мэтавага элемента пры ўсплыцці падзей

Няхай у нас ёсць два элементы: div i абзац 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() {
	console.log('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') {
		console.log('клік менавіта па дыве');
	}
	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('клік менавіта па дыве');
	}
	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;
}

Навешайце на дыў апрацоўшчык кліку. У гэтым апрацоўшчыку вызначце, у якому з тэгаў спрацавала падзея.

Мадыфікуйце папярэднюю задачу. Зрабіце так, каб пры кліку на li, ёй у канец дадаваўся клічнік, а пры кліку на ul у кансоль выводзілася інфармацыя аб гэтым.