Hente det målelementet ved hendelsesbobling

La oss si at vi har to elementer: div og et avsnitt p som ligger inne i denne diven:

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

La oss få en referanse til diven vår i en variabel:

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

La oss legge til noen stiler til taggene våre:

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

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

La oss nå si at det er en klikk-håndterer festet til diven:

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

På grunn av at diven vår har padding, kan vi, når vi klikker på diven, treffe avsnittet, eller vi kan treffe et sted hvor dette avsnittet ikke er, det vil direkte på diven.

Samtidig vil this i klikk-håndtereren alltid peke på det elementet som håndtereren er festet til. I vårt tilfelle er dette diven vår:

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

Imidlertid kan vi få tak i nettopp den taggen der hendelsen inntraff. For å gjøre dette kan vi se hva som ligger i event.target:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // enten diven eller avsnittet
});

Vi kan skille mellom disse to variantene ved hjelp av betingelser:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('klikk nettopp på diven');
  }
  if (event.target.tagName === 'P') {
    console.log('klikk nettopp på avsnittet');
  }
});

I stedet for tagName kan vi bruke matches:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('klikk nettopp på diven');
  }
  if (event.target.matches('p')) {
    console.log('klikk nettopp på avsnittet');
  }
});

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