Իվենթի բուբլինգի ժամանակ թիրախային տարրի ստացում

Ենթադրենք ունենք երկու տարր՝ 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, կամ պարագրաֆ
});

Կարելի է տարբերակել այս երկու տարբերակները՝ օգտագործելով պայմաններ՝

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