ඉබෙනු සිද්ධීන් තුළ ඉලක්කගත අංගය ලබා ගැනීම

අපට අංග දෙකක් ඇතැයි සිතමු: div සහ එම div එක තුළ පිහිටා ඇති p ඡේදය:

<div>
	<p></p>
</div>

අපගේ div එක විචල්‍යයකට සම්බන්ධ කර ගනිමු:

let div = document.querySelector('div');

අපගේ ටැග් වලට ඇතැම් විලාසිතා එක් කරමු:

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

දැන් div එකට ක්ලික් සංස්කාරකයක් එක් කර ඇතැයි සිතමු:

div.addEventListener('click', function() {
	console.log('click');
});

අපගේ div එකට padding ඇති හෙයින්, අපි div එක මත ක්ලික් කරන විට, එය ඡේදය මත වැදීමට හෝ එම ඡේදය නොමැති ස්ථානයක, එනම් div එක මත පෙළඹීමට හැකිය.

මෙහිදී ක්ලික් සංස්කාරකය තුළ this සැමවිටම සංස්කාරකය යොදන ලද අංගයට මූලිකත්වය දෙයි. අපගේ අවස්ථාවේ දී එය අපගේ div එක වේ:

div.addEventListener('click', function() {
	console.log(this); // div
});

කෙසේ වෙතත්, සිදුවීම සිදු වූ නිශ්චිත ටැග් එක අපට ලබා ගත හැකිය. මේ සඳහා අපි event.target හි පවතින දෙය බලා ගත හැකිය:

div.addEventListener('click', function(event) {
	console.log(event.target); // div හෝ p
});

මෙම විකල්ප දෙක කොන්දේසි භාවිතයෙන් වෙන්කර හඳුනා ගත හැකිය:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('ක්ලික් කරන ලද්දේ div එකටයි');
	}
	if (event.target.tagName === 'P') {
		console.log('ක්ලික් කරන ලද්දේ ඡේදයටයි');
	}
});

tagName වෙනුවට matches ක්‍රමය භාවිතා කළ හැකිය:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('ක්ලික් කරන ලද්දේ div එකටයි');
	}
	if (event.target.matches('p')) {
		console.log('ක්ලික් කරන ලද්දේ ඡේදයටයි');
	}
});

පහත අංග ලබා දී ඇත:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

div එකට ක්ලික් සංස්කාරකයක් යොදන්න. මෙම සංස්කාරකය තුළදී, සිදුවීම ක්‍රියාත්මක වූයේ කුමන ටැග් වලදීදැයි තීරණය කරන්න.

පෙර කාර්යය වෙනස් කරන්න. සකස් කරන්න li මත ක්ලික් කළ විට, එහි අගට හර්ෂක ලකුණක් එක් කරන අතර, ul මත ක්ලික් කළ විට එය පිළිබඳ තොරතුරු කොන්සෝලයේ මුද්‍රණය කරන ලෙසට.