Элемент падзеі ў аб'екце Event у JavaScript

Аб'ект Event таксама дазваляе атрымаць элемент, у якім адбылася падзея. Гэты элемент змяшчаецца ў уласцівасці target. Навошта гэта трэба, калі гэты элемент змяшчаецца ў this?

Справа ў тым, што на самой справе this заўсёды змяшчае элемент, да якога было прывязана падзея, а ўласцівасць target - элемент, па якім рэальна быў клік. Гэты рэальны элемент можа супадаць з this, а можа не супадаць.

Давайце паглядзім на прыкладзе. Хай у нас ёсць div, а ўнутры яго абзац:

<div id="elem">
	<p>text</p>
</div>

Прывязам падзею да дыву, але клікнем па абзацу. Відавоўчна, што клік па абзацу ўяўляе сабой адначасова і клік па дыве, так як абзац змяшчаецца ў нашым дыве.

У апісаным выпадку атрымаецца, што ўласцівасць target будзе змяшчаць канчатковы тэг, у якім здарылася падзея - гэта значыць абзац, а не дыў. Пераканаемся ў гэтым:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // вывядзе наш абзац
	console.log(this);         // вывядзе наш дыў
});

Хай у вас ёсць спіс ul з тэгамі li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Прывязаце да тэга ul апрацоўшчык кліку. У гэтым апрацоўшчыку правярайце з дапамогай уласцівасці tagName, па якому тэгу быў клік. Калі клік быў па тэгу li - дадайце ў канец тэксту гэтага тэга клічнік. А калі клік быў па тэгу ul - вывядзіце інфармацыю аб гэтым у кансоль.