Воҳиди ҳодиса дар объекти Event дар JavaScript

Объекти Event инчунин имкон медиҳад, ки воҳиде, ки дар он ҳодиса рух додааст, гирифта шавад. Ин воҳид дар хосияти target дарёфт мешавад. Чаро ин лозим аст, агар ин воҳид дар this дарёфт шавад?

Масъала он аст, ки дар асл this ҳамеша воҳидеро дар бар мегирад, ба он ки ҳодида баста шуда буд, ва хосияти target - воҳидеро, ки дар асл клик карда шуд. Ин воҳиди воқеӣ метавонад бо this мувофиқат кунад, ё намуна кунад.

Биёед ба мисол нигарем. Фарз мекунем, ки мо div дорем, ва дар дохили он абзас:

<div id="elem">
	<p>матн</p>
</div>

Ба div ҳодидаро мебандим, аммо ба абзас клик мекунем. Ошкор аст, ки клик ба абзас худ ҳамзамон ва клик ба 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>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ul>

Ба теги ul коргузори кликро мебандед. Дар ин коргузор бо ёрии хосияти tagName, тафтиш кунед, ки клик ба кадом тег буд. Агар клик ба теги li буд - ба охири матни ин тег аломати ситора (!) илова кунед. Ва агар клик ба теги ul буд - маълумотро дар бораи он дар консол чоп кунед.