Evento ignorato con la "nuova" sintassi

[Gas75]

Salve, ho una tabella, generata tramite un for di JavaScript, cui abbino al click in ogni cella, una funzione mostra(i) che carica dei contenuti da un file XML in un div apposito.
Vorrei capire perché funziona così:

for (let i = 0; i < dvd.length; i++) {
      tabella += "<tr><td onclick='mostra(" + i + ")'>"; 
      tabella += dvd[i].getElementsByTagName("titolo")[0].childNodes[0].nodeValue;
      tabella += "</td></tr>";
}

function mostra(i) { ... }

ma non così:

for (let i = 0; i < dvd.length; i++) {
        let indice = "film" + i;
        tabella += "<tr id='" + indice + "'><td>";
        tabella += dvd[i].getElementsByTagName("titolo")[0].childNodes[0].nodeValue;
        tabella += "</td></tr>";
        document.getElementById(indice).addEventListener("click", mostra);
}

function mostra(i) { ... }

Va in errore il listener...

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')