Olá Pedro, tudo bem ?
Realmente existem diversas formas de atingir alguns objetivos, algumas mais relacionadas com o html igual a que você citou, e outras, que estão mais no mundo do javascript, para essa questão de click teríamos até 3 formas
function executa(){
alert("fui clicado");
}
<button type="button" onclick="executa()"> </button>
botao.addEventListener("click", executa)
botao.onclick = executa
De todas essas, a que apresenta desvantagem é a última, pois se você fizer 2 botao.onclick estará sobrescrevendo o comportamento, diferente do listener que se você fizer mais de uma vez, todas as funções serão executadas
E utilizando pelo formulário, estamos de fato limitados a apenas uma função a ser executada, o que não necessariamente é algo ruim, pois na maioria das vezes iremos querer ter apenas uma função
Uma opinião pessoal minha é que com o eventListener temos um código um pouco mais coeso, pois por exemplo vamos supor que temos essa função clicou() mas ela não está no <script>, teremos algo assim, por exemplo:
- index.html
- js
- menu.js
- animacao.js
- listagem.js
- ads.js
Teremos que olhar todos os arquivos até encontrar a função que está sendo executada no html
Por outro lado, uma função simples, podemos incorporar tranquilamente pelo html e adicionar a tag script no final da maneira como você fez
Então, no final das contas é mais uma questão de como você vai estruturar seu código, de forma que fique mais fácil para você e sua equipe fazer pequenas manutenções :)
Conseguiu Compreender?
Abraços e Bons Estudos!
