javascript - Délégation d'événements js, comment les éléments enfants de e.target déclenchent-ils des événements ?

Question

Lorsque vous cliquez sur le td dans le tableau, les données liées au td seront renvoyées.

<p class='wrapper'>
    <table>
        <thead>.......</thead>
        <tbody>
            <tr>
                <td data-data='1'>1</td>
                ....
                <td data-data='2'><font color='red'>2</font></td>
                ....
            </tr>
            ....
        </tbody>
    </table>
</p>

Le tableau est généré dynamiquement. Liez l'événement au wrapper et utilisez la cible pour déclencher la balise td. Étant donné que certains td contiennent le sous-élément de police, la zone dans laquelle l'élément de police est cliqué ne peut pas être déclenchée.

$wrapper = document.querySelector('.wrapper');
$wrapper.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase === 'td') {
        console.log(e.target.dataset.data);
    }
},false);

Answer 1

$wrapper = document.querySelector('.wrapper');
$wrapper.addEventListener('click', function(e) {
  for (var el = e.target; el !== e.currentTarget; el = el.parentElement) {
    if(el.tagName.toLowerCase() === 'td') {
        return console.log(el.dataset.data);
    }
  }
}, false);