JavaScript-те Object ішіндегі оқиға элементі

Event объектісі сондай-ақ оқиға болған элементті алуға мүмкіндік береді. Бұл элемент target қасиетінде болады. Бұл не үшін қажет, егер бұл элемент this-те болатын болса?

Мәселе мынада, this әрқашан оқиға байланған элементті қамтиды, ал target қасиеті - шынымен басылған элемент. Бұл нақты элемент this-мен сәйкес келуі мүмкін, немесе сәйкес келмеуі мүмкін.

Мысалға қарайық. Бізде div және оның ішінде абзац бар делік:

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

Оқиғаны div-ге байлайық, бірақ абзацқа басайық. Абзацқа басу сонымен бірге div-ге де басу болатыны анық, себебі абзац біздің div-іміздің ішінде.

Сипатталған жағдайда target қасиеті оқиға болған соңғы тегті қамтиды - яғни абзацты, ал div емес. Мұны тексерейік:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // біздің абзацымызды шығарады
	console.log(this);         // біздің div-імізді шығарады
});

Сізде 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 тегіне болса - бұл туралы ақпаратты консольге шығарыңыз.