Mendapatkan Elemen Target saat Bubbling Event

Misalkan kita memiliki dua elemen: div dan paragraf p, yang terletak di dalam div ini:

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

Dapatkan referensi ke div kita dalam variabel:

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

Berikan beberapa gaya pada tag kita:

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

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

Sekarang misalkan handler klik ditambahkan ke div:

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

Karena div kita memiliki padding, maka ketika kita mengklik div, kita bisa mengklik paragraf, atau kita bisa mengklik di tempat yang tidak ada paragrafnya, yaitu langsung di div.

Dalam hal ini, this dalam handler klik akan selalu merujuk ke elemen tempat handler dipasang. Dalam kasus kita ini adalah div kita:

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

Namun, kita bisa mendapatkan tepatnya tag di mana event terjadi. Untuk ini kita dapat melihat apa yang ada di event.target:

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

Kita dapat membedakan kedua opsi ini dengan menggunakan kondisi:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('klik tepatnya di div');
  }
  if (event.target.tagName === 'P') {
    console.log('klik tepatnya di paragraf');
  }
});

Alih-alih tagName, kita bisa menggunakan matches:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('klik tepatnya di div');
  }
  if (event.target.matches('p')) {
    console.log('klik tepatnya di paragraf');
  }
});

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