Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Mise à jour: 09/12/2021

Nouvelle source avec deux solutions proposées (la 1ère fonctionne, je l’ai testée): Codepen: CodePen Home
Event delegation with SVGs and closest()
et Codepen: CodePen Home
Event Delegation with an SVG
.


Sources:

Description du problème

J’ai le markup HTML suivant:

…et je souhaite récupérer l’ID de l’élément enfant qui est cliqué lorsque je clique sur l’ensemble de la zone #p. Mais c’est systématiquement l’ID #p qui m’est remonté.

Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué

Note importante: ne pas tenter de passer this ou thisobj à la place de event en paramètre de la fonction. Le libellé du paramètre est important et doit rester event à cet endroit là. Plus d’info ici: Difference between this and event.target.

Cas plus complexe où la fonction est déclenchée via un attribut onClick dans la source HTML…

…et où une classe précise doit être mise à l’écart.