element.addEventListener(event, function, useCapture);element: É aqui que você adiciona o addEventListener;
addEventListener: Um método(função) que adiciona o manipulador de eventos ao elemento especificado;
event: Tipo do evento (ex: “click”, “submit”, “mousedown”).;
function: A função que queremos chamar(executar) quando o evento acontecer;
useCapture: Um argumento opcional que retorna(fornece) um valor booleano(true or false), se o evento será realizado na fase de captura ou na fase de borbulhamento.
Imagem ilustrativa da fase de captura e da fase de borbulhamento: https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg
Evento de ‘click’ EventListeners
O ‘click’ do EventListener é usado quando você precisa que um usuário clique em um elemento para acessar informações adicionais, mudar de página, ir para um formulário, etc. Por exemplo, se eu quiser que o clique esteja no botão que diz “Editar”, eu usaria as seguintes linhas de código:
Imagem ilustrativa: https://miro.medium.com/max/4560/1*szeKBHWoVqoWqScN_XPciA.png
Evento de ‘submit’ EventListeners
O ‘submit’ do EventListeners é usado em formulários que o usuário enviará. Como resultado, o EventListener não é atrelado ao botão de envio, mas ao próprio formulário.
Imagem ilustrativa: https://miro.medium.com/max/700/1*6a_S67DCIr29wfKrPQFO2w.png
O e.preventDefault () evita a configuração padrão de envio do EventListener.
Em resumo, certifique-se de que o ‘click’ do EventListener esteja anexado ao elemento onde o usuário deve clicar. O ‘submit’ do EventListener deve ser anexado ao elemento de formulário que o usuário está enviando.
Traduzido: https://betterprogramming.pub/click-vs-submit-eventlisteners-536b62be9359
Os meus dois centavos de contribuição! :)
