Obtention de l'élément cible lors du bouillonnement des événements

Supposons que nous ayons deux éléments : un div et un paragraphe p, se trouvant à l'intérieur de ce div :

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

Obtenons une référence vers notre div dans une variable :

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

Ajoutons quelques styles à nos balises :

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

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

Supposons maintenant qu'un gestionnaire de clic soit attaché au div :

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

Parce que notre div a un padding, lorsque nous cliquons sur le div, nous pouvons cliquer sur le paragraphe, ou nous pouvons cliquer à un endroit où il n'y a pas de paragraphe, c'est-à-dire directement sur le div.

Dans ce cas, dans le gestionnaire de clic, this pointera toujours vers l'élément sur lequel le gestionnaire est attaché. Dans notre cas, c'est notre div :

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

Cependant, nous pouvons obtenir exactement la balise dans laquelle l'événement s'est produit. Pour cela, nous pouvons regarder ce qui se trouve dans event.target :

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // soit le div, soit le paragraphe
});

Il est possible de distinguer ces deux cas à l'aide de conditions :

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('clic directement sur le div');
  }
  if (event.target.tagName === 'P') {
    console.log('clic directement sur le paragraphe');
  }
});

Au lieu de tagName, on peut utiliser matches :

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('clic directement sur le div');
  }
  if (event.target.matches('p')) {
    console.log('clic directement sur le paragraphe');
  }
});

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