Olayların Kabarcıklanmasında Hedef Elemanın Elde Edilmesi

Elimizde iki eleman olsun: div ve bu div'in içinde bulunan p paragrafı:

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

Div'imizin referansını bir değişkene alalım:

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

Etiketlerimize bazı stiller ekleyelim:

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

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

Şimdi div'e bir tıklama olay dinleyicisi ekleyelim:

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

Div'imizin padding'i olduğu için, div'e tıkladığımızda, ya paragrafın üzerine ya da paragrafın olmadığı, doğrudan div'in kendisine tıklamış olabiliriz.

Bu durumda, tıklama olay dinleyicisinde this her zaman olay dinleyicisinin bağlandığı elemanı gösterecektir. Bizim durumumuzda bu, div'imizdir:

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

Ancak, olayın tam olarak hangi etikette meydana geldiğini öğrenebiliriz. Bunun için event.target içinde ne olduğuna bakabiliriz:

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

Bu iki durumu koşullar kullanarak ayırt edebiliriz:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('tıklama doğrudan div üzerinde');
	}
	if (event.target.tagName === 'P') {
		console.log('tıklama doğrudan paragraf üzerinde');
	}
});

tagName yerine matches kullanılabilir:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('tıklama doğrudan div üzerinde');
	}
	if (event.target.matches('p')) {
		console.log('tıklama doğrudan paragraf üzerinde');
	}
});

Aşağıdaki elemanlar verilmiştir:

<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'e bir tıklama olay dinleyicisi ekleyin. Bu olay dinleyicisinde, olayın hangi etikette tetiklendiğini belirleyin.

Önceki görevi değiştirin. li'ye tıklandığında, sonuna bir ünlem işareti eklenmesini, ul'ye tıklandığında ise konsola bu durumla ilgili bilgi yazılmasını sağlayın.