event.stopPropagation vs event.preventDefault () vs return false dans les événements DOM

J'ai l'impression que je suis toujours confus par une chose quand il s'agit de gérer les événements DOM en JavaScript.

Quand dois-je appelerstopPropagation()sur l'objet événement? Quand dois-je appelerpreventDefault()sur l'objet événement? Devrais-jereturn false?

Event.stopPropagation

Supposons que je souhaite gérer un événement de clic sur un élément.

Par défaut, un événement sur un élément DOM est déclenché sur l'élément spécifique sur lequel vous avez cliqué (par exemple, un bouton) et sera propagé à toute son arborescence d'éléments parents, à moins qu'il ne soit arrêté.

Je veux m'assurer que l'événement est géré dans mon gestionnaire d'événements, et il «s'arrêtera» là.

Vous pouvez arrêter la propagation en appelantstopPropagation()méthode d'unEventobjet, généralement à la fin du gestionnaire d'événements:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Event.preventDefault

Appelant lepreventDefault()La méthode de l'objet événement annulera la gestion par défaut que le navigateur est programmé pour exécuter.

Ouverture d'une nouvelle page sur unaélémentclickévénement, par exemple.

Ou soumettre unformsur lesubmitun événement.

AppelpreventDefault()est ce que vous devez faire pour personnaliser complètement l'action. Peut-être en créant unfetchdemander de charger du JSON au lieu d'ouvrir une nouvelle page sur un clic de lien.

Les autres gestionnaires d'événements définis sur ce même élément s'exécuteront. Sauf si vous appelezevent.stopImmediatePropagation().

Retourfalse

Ceci est particulièrement déroutant pour les anciens (ou actuels) développeurs jQuery. Dans jQuery, retourfalseà partir d'un gestionnaire d'événements appelé automatiquementEvent.preventDefaultetEvent.stopPropagationpour nous.

En JavaScript vanille,return falsedans un gestionnaire d'événementsrien.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: