Hadiselerin qalxmasinda hedef elementin alinmasi

Tutaq ki, bizim iki elementimiz var: div və bu div-in içinde olan abzas p:

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

Div-ə istinadımızı dəyişəndə alaq:

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

Teqlərimizə bəzi stillər əlavə edək:

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

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

İndi isə div-ə klik hadisesi üçün emeliyyatçı əlavə edək:

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

Div-imizin padding olduğuna görə, div-ə klik etdiyimiz zaman biz ya abzasa klik edə bilərik, ya da abzasın olmadığı yere, yəni birbaşa div-ə klik edə bilərik.

Bununla belə, klik emeliyyatçısında this həmişə emeliyyatçının əlavə edildiyi elementi göstərəcək. Bizim veziyyetimizde bu bizim div-imizdir:

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

Ancaq, biz hadisenin baş verdiyi dəqiq teqi ala bilərik. Bunun üçün biz event.target-da nə olduğuna baxa bilərik:

div.addEventListener('click', function(event) {
	console.log(event.target); // ya div, ya da abzas
});

Bu iki variantı şərtlər vasitəsilə fərqləndirmək olar:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik birbaşa div-ə');
	}
	if (event.target.tagName === 'P') {
		console.log('klik birbaşa abzasa');
	}
});

tagName əvəzinə matches istifadə etmək olar:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik birbaşa div-ə');
	}
	if (event.target.matches('p')) {
		console.log('klik birbaşa abzasa');
	}
});

Aşağıdakı elementlər verilib:

<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-ə klik emeliyyatçısı əlavə edin. Bu emeliyyatçıda hadisənin hansı teqde baş verdiyini müəyyən edin.

Əvvəlki məsələni modifikasiya edin. Elə edin ki, li-yə klik edəndə, onun sonuna nida işarəsi əlavə olunsun, ul-a klik edəndə isə konsola bu haqqda informasiya çıxsın.