Eventos onMouseDown y onClick de JavaScript versus cola de eventos.
Tengo el siguiente código JS simple (https://stackblitz.com/edit/web-platform-ueq5aq?file=script.js):
const baton = document.querySelector(‘button’);
baton.addEventListener(‘mousedown’, (e) => {
console.log(‘baton’);
baton.addEventListener(‘click’, (e) => {
console.log(‘baton click’);
});
});
Cuando hago clic en un botón, se registran “baton” y “baton click” en la consola. Ahora mi pregunta es: ¿qué sucede exactamente aquí? Según entiendo, en el momento en que se ejecuta el script, se agrega el controlador “mousedown” a la cola de eventos. Cuando hago clic en el botón, se ejecuta este controlador, por lo que se toma de la cola de eventos, se agrega a la pila de llamadas y se ejecuta. Cuando se ejecuta, se agrega el controlador “click” a la cola de eventos.
¿Cómo se activa realmente el evento onClick después de onMouseDown? ¿Cómo está relacionado con la cola de eventos? ¿Por qué se ejecuta primero el controlador onMouseDown antes de que ocurra el evento click? Lo pregunto porque tengo un código mucho más complejo donde el resultado es diferente en diferentes escenarios.
Cuando un usuario navega a una página en una SPA que contiene un script similar y luego hace clic en el botón “baton”, el orden es:
evento mousedown -> controlador mousedown -> controlador click -> evento click
Y cuando un usuario actualiza la página, por lo que la SPA se carga directamente en esa página, y hace clic en el botón “baton”, el orden es:
evento mousedown -> evento click -> controlador mousedown
Estoy buscando respuestas y la verdad. Cualquier ayuda será muy apreciada.
PD. Desafortunadamente, no puedo reproducir este error en el repositorio de ejemplo: ocurre en una aplicación web bastante compleja cuyo código de producción no puedo compartir aquí por razones obvias.
PD2. Solo para aclarar, porque probablemente no está indicado con suficiente claridad: no estoy preguntando “por qué se activa el evento mousedown antes que el evento click”, sino “por qué se ejecuta el controlador mousedown antes del evento click”. Esto NO es obvio, porque los controladores no se ejecutan inmediatamente. Para que se ejecute un controlador, primero debe esperar a que la pila de llamadas esté vacía, para que el motor de JS pueda procesar la cola de eventos.
davy.ai
Cuando se hace clic en el botón, se desencadena el evento
mousedowny se agrega el handlermousedowna la cola de eventos. A continuación, se desencadena el eventoclicky se agrega el handlerclicka la cola de eventos. Luego se toma el handlermousedownde la cola de eventos y se agrega a la pila de llamadas. Cuando la pila de llamadas está vacía, se toma el handlerclickde la cola de eventos y se agrega a la pila de llamadas.El orden en el que se desencadenan los eventos y se agregan los handlers a la cola de eventos está determinado por el orden en que se desencadenan los eventos. En el caso de una SPA, se desencadena primero el evento
mousedowny luego el eventoclick. Por esta razón, se ejecuta el handlermousedownantes de que ocurra el eventoclick.El orden en el que se agregan los eventos y los handlers a la pila de llamadas está determinado por el orden en que se agregan los eventos a la cola de eventos. En el caso de una SPA, se agrega primero el handler
mousedowna la cola de eventos, seguido del handlerclick. Por esta razón, se ejecuta el handlermousedownantes que el handlerclick.