A diferença maior que vejo é nas declarações.
Na opção 1, você usou uma função, e na opção 2, uma função anônima.
Creio que a principal diferença nesse caso é que, com a função declarada, para depois ser passada por callback
, você pode repeti-la para eventos diferentes (quantas vezes quiser), sem repetir código desnecessário.
Exemplo:
$('#dois').on("click", testar);
$(document).on("click", ".botao-dinamico", testar);
function testar() {
console.log('Teste Dois');
}
Como já foi citado, muitas pessoas não sabem que é possível fazer tal operação em jQuery e acabam caindo no problema a seguir:
$('#dois').on("click", function () {
console.log('Teste Dois');
});
$(document).on("click", ".botao-dinamico", function () {
console.log('Teste Dois');
});
Note que o segundo exemplo trata-se de uma complicação desnecessária. Sendo assim, fico com a minha primeira opção.
É claro que temos que relembrar que o exemplo está bem simples nesse caso. Você poderia ter ganhos maiores em casos onde precisasse de uma função mais complexa.
Por exemplo, a sua função testar
poderia estar utilizando this
ou então alguns parâmetros específicos (como event
) normalmente, pois no final isso não vai fazer diferença alguma, já que tudo que o jQuery precisa é um callback.
Bônus
Se você quiser considerar apenas como curiosidade essa informação que passarei a seguir, ainda é possível utilizar uma função anônima nomeada:
$('#um').on("click", function onClick() {
console.log(onClick);
});
No caso específico, ela não vai entrar no escopo global ou local do Javascript, mas vai estar acessível apenas da própria função anônima.
$('#dois').on("click", testar);
seria o mesmo de$('#dois').on("click", function(){ //... } );