JavaScript හි Event වස්තුවේ සිදුවීම් අංගය

Event වස්තුව ද සිදුවීම සිදු වූ අංගය ලබා ගැනීමට ඉඩ සලසයි. මෙම අංගය target ගුණයේ අඩංගු වේ. this හි මෙම අංගය අඩංගු නම් මෙය අවශ්‍ය ඇයි?

කාරණය නම්, සැබවින්ම this සෑම විටම සිදුවීම බැඳ ඇති අංගය අඩංගු කරයි, අතර target ගුණය - සැබවින්ම ක්ලික් කළ අංගය. මෙම සැබෑ අංගය this සමග ගැලපිය හැකිය, නැතහොත් නොගැලපිය හැකිය.

අපි උදාහරණයක් බලමු. අප සතුව div එකක් ඇතැයි සිතමු, එහි ඡේදයක් ඇත:

<div id="elem">
	<p>text</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>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul ටැගයට ක්ලික් හසුරුවනයක් බන්ධනය කරන්න. මෙම හසුරුවනය තුළ, tagName ගුණය භාවිතයෙන් පරීක්ෂා කරන්න, කුමන ටැගය මත ක්ලික් කරන ලද්දේ ද යන්න. ක්ලික් කිරීම li ටැගය මත සිදු වූවා නම් - මෙම ටැගයේ පෙළ අවසානයට හාස්‍ය ලකුණක් එක් කරන්න. නමුත් ක්ලික් කිරීම ul ටැගය මත සිදු වූවා නම් - මෙම තොරතුර කොන්සෝලයේ ප්‍රදර්ශනය කරන්න.