Comment puis-je écouter les événements de soumission de formulaire en JavaScript sans utiliser les attributs d'événement HTML ?

Écouter les événements de soumission de formulaire en JavaScript sans attributs d'événement HTML

Dans le développement Web, la gestion des événements de soumission de formulaire est essentielle pour valider les entrées de l'utilisateur et effectuer des actions personnalisées. Traditionnellement, les développeurs utilisaient des attributs HTML tels que onSubmit ou onClick pour écouter ces événements. Cependant, cette approche nécessite de modifier le code HTML, ce qui peut être peu pratique et sujet aux erreurs.

Écoute avec les écouteurs d'événements

Pour écouter les événements de soumission de formulaire en JavaScript pur sans attributs d'événement HTML, tirez parti la méthode addEventListener() de l'interface EventTarget. Cela vous permet d'attacher des écouteurs d'événements aux éléments du formulaire sans modifier leur balisage HTML.

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

La fonction eventHandler sera exécutée chaque fois que le formulaire est soumis. Vous pouvez exécuter votre logique de validation ou d'autres actions personnalisées dans cette fonction.

Prévenir la soumission du formulaire par défaut

Si vous souhaitez empêcher le comportement de soumission du formulaire par défaut, appelez la méthode PreventDefault() sur l'événement. objet dans le gestionnaire d'événements :

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

Utilisation de EventTarget.addEventListener

La méthode EventTarget.addEventListener est largement prise en charge par les navigateurs modernes. Il offre une solution multi-navigateurs pour écouter les événements sur divers éléments DOM, y compris les éléments de formulaire.

Alternatives avec les bibliothèques

Si vous préférez utiliser une bibliothèque, envisagez les options suivantes :

• jQuery : $(ele).submit(callback);
• React : const callback = (event) => {} ;
• Vue : @submit="mySubmitHandler"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!