Solucionado
Até o momento no código estamos interagindo com o formulário e colocamos um evento de submit nele.
O caso é que esse formulário tem 3 botões e em nenhum momento nos direcionamos especificamente ao botao Salvar.
Então como o formulário "sabe" que ele tem que executar o código somente no botão salvar e não nos outros botões?
Olá, Tayna, como vai?
O ponto chave é que o evento que você está ouvindo não está sendo disparado pelo botão em si, mas sim pelo formulário. Quando um formulário possui um botão com o atributo type="submit" (ou simplesmente quando não especificamos o tipo, pois o valor padrão é submit), ao clicar nesse botão o navegador entende que o formulário deve ser enviado, disparando o evento submit.
<footer class="app__form-footer">
<button type="button" class="app__form-footer__button app__form-footer__button--delete">
<img src="/imagens/delete.png" alt=""> Deletar
</button>
<div class="splitter"></div>
<button type="button" class="app__form-footer__button app__form-footer__button--cancel">
<img src="/imagens/close.png" alt=""> Cancelar
</button>
<button class="app__form-footer__button app__form-footer__button--confirm"> <!-- Esse não tem type definido -->
<img src="/imagens/save.png" alt=""> Salvar
</button>
</footer>
Por isso, mesmo que existam vários botões dentro do mesmo formulário, apenas os que são do tipo submit vão acionar esse envio. Já botões do tipo button ou reset, por exemplo, não disparam o evento de submissão.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)