მოვლენების ამოსვლისას სამიზნე ელემენტის მიღება

დავუშვათ, გვაქვს ორი ელემენტი: div და აბზაცი p, რომელიც მდებარეობს ამ div-ის შიგნით:

<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-ზე დაწკაპუნებისას კონსოლში გამოიტანოს ინფორმაცია ამის შესახებ.