detectar clique nos filhos (p2)

Achei interessante o questionamento do Marcos Vinicius no post abaixo:

https://cursos.alura.com.br/forum/topico-detectar-clique-nos-filhos-68232

O código dele:

<div id="local" class="container form-row">
                <button id="sp" type="button" class="btn btn-light">São Paulo</button>
                <button type="button" class="btn btn-light">Recife</button>
                <button type="button" class="btn btn-light">Belo Horizonte</button>
                <button type="button" class="btn btn-light">Porto Alegre</button>            
</div>
...

$("#local").children().click(function(dado) {
    var text = $(dado).val();
    console.log(text);
});

A ideia era identificar qual botão foi clicado.

A solução que eu consegui, mais próxima do jQuery, mesclando com o JS puro, foi assim:

    <div id="local" class="container form-row">
        <button id="sp" type="button" class="btn btn-light">São Paulo</button>
        <button type="button" class="btn btn-light">Recife</button>
        <button type="button" class="btn btn-light">Belo Horizonte</button>
        <button type="button" class="btn btn-light">Porto Alegre</button>            
    </div>

    <script src="js/jquery.js"></script>

    <script>
        $("#local").click(function(dado) {
        var texto = dado.target.textContent;
        console.log(texto);
    });
    </script>

Segue a ideia do Event Bubbling do curso anterior da formação (https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24412).

Outro jeito que também funciona é:

    <script>
        $("#local").click(function(dado) {
        var texto = $(dado.target).text();
        console.log(texto);
    });
    </script>

Mas no lugar que achei disseram que perde bastante em performance comparado com o uso do JS puro: https://stackoverflow.com/questions/12758547/jquery-click-event-on-parent-but-finding-the-child-clicked-element