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