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

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

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

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

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

Etiketlerimize bazı stiller ekleyelim:

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

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

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

javascriptdiv.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:

javascriptdiv.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:

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

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

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

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

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}