javascript - delegasi acara js, bagaimanakah elemen anak e.target mencetuskan peristiwa?

Question

Apabila mengklik pada td dalam jadual, data yang terikat pada td akan diberi semula.

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

Jadual dijana secara dinamik Ikat acara pada pembungkus dan gunakan sasaran untuk mencetuskan teg td Kerana sesetengah td mempunyai sub-elemen fon di dalam, kawasan di mana elemen fon diklik tidak boleh dicetuskan.

$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);