ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:
- déléguer un événement à un élément du DOM créé dynamiquement
- détecter l’événement click sur un SVG
Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.
|
1 2 3 4 |
<div id="combinationSummaryList"> <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a> <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément --> </div> |
|
1 2 3 4 5 6 7 |
const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' ); $_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) { if ( !event.target.closest( '.SelectionSummary-link' ) ) return; event.preventDefault(); // code à exécuter }, false ); |
Javascript dans le cas d’un SVG:
|
1 2 3 4 5 |
$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) { if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return; event.preventDefault(); const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' ); }, false ); |