Нажмите на целевой ячейке таблицы дочерний элемент

Question

У меня есть простая HTML-таблица с идентификаторами в некоторых ячейках:

<td id="x-11"><b>Is it a cell?</b> What a cell!</td>

Теперь я хотел бы передать идентификатор функции JavaScript, запущенной по щелчку мыши:

const $tds = document.querySelectorAll('td[id]')
    for (let i = 0; i < $tds.length; i++)
        $tds[i].addEventListener('click', ev => console.log(ev.target.id))

Этоработает как положено, если я щелкаю пустую область или обычный текст внутри ячейки.Но если я нажму на текст внутри элемента <b>, произойдет что-то странное: браузер скажет, что элемент <b> - это ev.target - хотя у него вообще нет слушателя.

Может кто-нибудь объяснить это поведение илипредложить решение?

Обновление: Как указано в комментариях, Разница между e.target и e.currentTarget дает ответ (для ActionScript, но это не 'не имеет значения здесь), но вопрос в другом.

Answer 1

Вам нужно использовать this или ev.currentTarget, который всегда ссылается на элемент DOM, к которому был присоединен слушатель, вместо этого ev.target будет ссылаться на элемент, вызвавший событие, в данном случае, на элемент DOMнажал:

$tds[i].addEventListener('click', function(){
   console.log(this.id)
});
//Or
$tds[i].addEventListener('click', ev => console.log(ev.currentTarget.id))