JavaScript даги Event объектидаги event элементи

Event объекти event юз берган элементини олиш имконини беради. Ушбу элемент target хусусиятида сақланади. Агар бу элемент this да мавжуд бўлса, нега ушбу хусусият зарур?

Гапи шундаки, this ҳар доим event богланган элементини ўз ичига олади, target хусусияти эса - чинокдан ҳам клик қилинган элементни. Ушбу чинокдан ҳам клик қилинган элемент this билан мос келиши мумкин, ёки мос келмаслиги мумкин.

Келиб, мисол кўриб чиқайлик. Айтайлик, бизда div мавжуд, унинг ичида эса абзац бор:

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

Event ни дивга боглаймиз, лекин абзац устида клик қиламиз. Абзац устида клик қилиш, шубҳасиз, див устида клик қилишдир, чунки абзац бизнинг дивимизнинг ичида жойлашган.

Сўз бораётган ҳолда, target хусусияти event юз берган охирги тегни ўз ичига олади - яъни абзацни, дивни эмас. Буни ишонч ҳолда кўрамиз:

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 хусусияти tagName ёрдамида қайси тегда клик бўлганини текширинг. Агар клик li тегида бўлса - ушбу тег матининг охирига undov белгиси қўшинг. Агар клик ul тегида бўлса - бу ҳақда маълумотни консолга чиқаринг.