Tengo problemas para comprender los detectores de eventos y las variables que envían a la función a la que llaman.
Por ejemplo, agregué un detector de eventos a esta celda con la intención de llamar a una función que verifica si el mouse está presionado mientras se mueve sobre un elemento:
cell.addEventListener("mousemove", cellControl);
function cellControl(e) {
if (e.buttons == 1) {
// Do things
}
}
Pude hacer que esta función funcionara al encontrar otras respuestas de desbordamiento de pila, pero no entiendo por qué funciona. El detector de eventos llama a cellControl sin pasar ninguna variable, pero la función cellControl recibe un objeto de todos modos que puedo verificar para obtener datos.
¿Por qué el detector de eventos envió estos datos y cómo puedo averiguar qué datos envían diferentes detectores de eventos a las funciones que llamo? Leí esta página pero no pude encontrar la respuesta.
la devolución de llamada acepta un solo parámetro: un objeto basado en Evento que describe el evento que ha ocurrido
El parámetro es un objeto de evento de JavaScript. Puede encontrar las propiedades aquí https://developer.mozilla.org/en-US/docs/Web/API/Event#properties
La función de devolución de llamada que proporciona a la función addEventListener puede ser una función anónima. Se vería así:
cell.addEventListener("mousemove", function(e){
cellControl(e);
});
Eso puede ser útil si desea proporcionar otros argumentos a la función de devolución de llamada además del objeto de evento:
cell.addEventListener("mousemove", function(e){
cellControl(e, anotherArgument);
});
Puede encontrar más información sobre el objeto de evento como se menciona en la respuesta de Michael. También me resulta muy útil consolar. registrar el objeto de evento o solo ciertas propiedades del mismo. Por ejemplo:
function cellControl(e) {
console.log('e', e);
console.log('e.buttons', e.buttons);
if (e.buttons == 1) {
// Do things
}
}
Ahora, si observa la pestaña de la consola en las herramientas de desarrollo de su navegador (Ctrl Shift K en Firefox), verá la información sobre el objeto de evento que desea siempre que pase el mouse sobre el elemento relevante en su página web.
Para responder a su pregunta,
¿Cómo puedo averiguar qué datos envían los diferentes detectores de eventos a las funciones que llamo?
El método addEventListener() (es decir, la función) siempre enviará el objeto de evento a la devolución de llamada y nada más. El objeto de evento será diferente para casi todos los casos, pero las propiedades serán (en gran parte o posiblemente totalmente???) las mismas. Los valores de las propiedades serán diferentes, por supuesto.