JavaScript'te Event Nesnesinde Olay Öğesi

Event nesnesi ayrıca, olayın gerçekleştiği öğeyi almamıza izin verir. Bu öğe target özelliğinde bulunur. Bu öğe this içinde zaten var ise buna neden ihtiyaç var?

Aslında, this her zaman olayın bağlandığı öğeyi içerir, target özelliği ise - tıklamanın gerçekte yapıldığı öğedir. Bu gerçek öğe this ile örtüşebilir veya örtüşmeyebilir.

Bir örnek üzerinden inceleyelim. Bir div ve onun içinde bir paragrafımız olsun:

<div id="elem">
	<p>text</p>
</div>

Olayı div'e bağlayalım, ancak paragrafa tıklayalım. Açıktır ki, paragrafa tıklamak aynı zamanda div'e de tıklamaktır, çünkü paragraf bizim div'imizin içinde yer alır.

Açıklanan durumda, target özelliği, olayın gerçekleştiği son etiketi içerecektir - yani div'i değil, paragrafı. Bunu doğrulayalım:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // paragrafımızı yazdıracak
	console.log(this);         // div'imizi yazdıracak
});

li etiketlerine sahip bir ul listeniz olsun:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul etiketine bir tıklama olay işleyicisi bağlayın. Bu işleyicide, tagName özelliğini kullanarak, tıklamanın hangi etikete yapıldığını kontrol edin. Eğer tıklama li etiketine ise - bu etiketin metnin sonuna ünlem işareti ekleyin. Eğer tıklama ul etiketine ise - bununla ilgili bilgiyi konsola yazdırın.