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:

html<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:

javascriptlet 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
});

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

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