event.stopPropagation vs event.preventDefault () vs return false en eventos DOM

Siento que siempre me confunde una cosa cuando se trata de manejar eventos DOM en JavaScript.

Cuando debo llamarstopPropagation()en el objeto de evento? Cuando debo llamarpreventDefault()en el objeto de evento? Deberíareturn false?

Event.stopPropagation

Supongamos que quiero manejar un evento de clic en un elemento.

De forma predeterminada, un evento en un elemento DOM se activa en el elemento específico en el que se hace clic (por ejemplo, un botón) y se propagará a todo su árbol de elementos principales, a menos que se detenga.

Quiero asegurarme de que el evento se maneja en mi controlador de eventos, y se “detendrá” allí.

Puede detener la propagación llamandostopPropagation()método de unEventobjeto, generalmente al final del controlador de eventos:

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

  event.stopPropagation()
})

Event.preventDefault

Llamando alpreventDefault()El método del objeto de evento cancelará el manejo predeterminado que el navegador está programado para ejecutar.

Abrir una nueva página en unaelementoclickevento, por ejemplo.

O enviando unformsobre elsubmitevento.

VocaciónpreventDefault()es lo que debe hacer para personalizar completamente la acción. Quizás creando unfetchsolicitud para cargar JSON en lugar de abrir una nueva página con un clic en un enlace.

Se ejecutarán otros controladores de eventos definidos en este mismo elemento. A menos que llamesevent.stopImmediatePropagation().

Regresandofalse

Esto es especialmente confuso para los desarrolladores de jQuery anteriores (o actuales). En jQuery, regresandofalsedesde un controlador de eventos llamado automáticamenteEvent.preventDefaultyEvent.stopPropagationpara nosotros.

En JavaScript vainilla,return falseen un controlador de eventos hacenada.


Más tutoriales de js: