Dúvida no Ex. 5 da Aula 3 - Criando elementos dinamicamente

Olá, Eduardo.

É exatamente isso mesmo.

O que talvez não foi explicado é que o JavaScript possui um sistema de captura de click:

Existem duas fases, uma é a capturing que acontece do maior elemento (window) até o menor elemento (aquele que realmente foi clicado). E existe a fase de bubbling, que vai do elemento clicado vai até o elemento maior (window).

No caso do método .on( "click", "tr", callback); você está usando esse recurso do JavaScript. Quem tem o listener é o elemento com o id #tabela, e quando você clicar no <tr> na fase de bubbling ele vai ver que tem um listener no #tabela e disparar o callback.

Além da vantagem de todo elemento <tr> novo que entrar "recebe" o listener, você ganha que agora só mantém um listener na página ao invés de um para cada <tr>.

Se você olhar na documentação do jQuery verá que ele usa o recurso de bubbling:

An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):

$( "#dataTable tbody" ).on( "click", "tr", function() {
    console.log( $( this ).text() );
});

Conseguiu entender o conceito?

Cada tr fica com o callback para o listener que ja ta setado pelo id, e por isso passar o tr como parâmetro, para que todo novo criado veja que tem o cara lá como listener para ele como callback \o\

Show a img ali, te confesso que nao li a doc ainda, mas sei que é fundamental e vai me salvar no futuro hahahah

Eduardo, é quase isso que comentou.

Lembra que o listener está no cara que tem o id tabela e graças a forma de captura de eventos do JavaScript, o clique parte do tr até chegar no elemento com o id tabela. É o cara com o #tabela que invoca o callback, mas como o tr é passado como parametro no método do jQuery, é o tr que recebeu o clique quem será o this do callback.

A vantagem deste método é que você tem apenas 1 listener para n trs que podem existir na tabela. Cada listener que você coloca no código aumenta o consumo de memória da página.

Não precisa sair lendo a documentação, acho perda de tempo isso. Mas vale a pena ler quando tiver uma dúvida sobre algo. Você aprende muito e entende o porque aquilo existe.

Este teu trecho foi bem explicativo:

No caso do método .on( "click", "tr", callback); você está usando esse recurso do JavaScript. Quem tem o listener é o elemento com o id #tabela, e quando você clicar no

Ele faz aquele processo que explicaste e na volta disto, que fará o callback que será aquela função ali

$( "#tabela" ).on( "click", "tr", function() {
  $( this ).toggleClass( "chosen" );
});

Exato Eduardo!

Posso ter interpretado o comentário anterior de forma errada. Daí quis confirmar se tinha entendido, para não deixar pontas soltas.

Sim, muito obrigado, me ajudou a entender o how it works