Explique event delegation e quando você a usaria em vez de anexar listeners a cada elemento.

Event delegation significa anexar um único listener a um ancestral comum e usar event.target para descobrir com qual descendente houve interação. Funciona porque a maioria dos eventos borbulha do alvo pelos seus ancestrais. Use em listas que mudam com frequência ou que são grandes, já que você evita anexar e limpar centenas de listeners. Não use para eventos que não borbulham, como focus, blur e a maioria dos eventos de mídia.

Em vez de colocar um listener de clique em cada linha, coloco um no container e leio event.target, depois subo com closest para achar a linha que me interessa. Funciona porque o clique borbulha do que foi realmente clicado pelos ancestrais, então o container enxerga tudo abaixo dele. Os dois ganhos são que não estou criando e destruindo centenas de listeners, e que linhas adicionadas depois simplesmente funcionam sem rebind. As pegadinhas valem ser ditas: focus e blur não borbulham, então uso focusin e focusout para esses, e se algum código entre o alvo e o meu container chamar stopPropagation, meu handler para de disparar silenciosamente, o que é um bug genuinamente chato de rastrear. Peguei isso principalmente numa tabela em que um componente interno parava a propagação para fechar o próprio menu e matava a seleção de linha sem alarde. Hoje em dia normalmente ganho delegation de graça do framework, mas ainda uso direto em listas grandes virtualizadas e em qualquer coisa renderizada fora da árvore do framework.