Իվենթի տարրը Event օբյեկտում JavaScript-ում

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 թեգի վրա - տպեք այդ մասին տեղեկատվությունը կոնսոլում: