una - ¿Qué es exactamente el parámetro e(evento) y por qué pasarlo a las funciones de JavaScript?

pasar variables entre funciones javascript

Question

Bueno, cuando aprendí JavaScript, todos los libros y artículos de Internet que leí mostraban que el código pasaba un parámetro e a funciones que manejan eventos de JavaScript, como el siguiente bloque de código:

function myEvent(e) {
    var evtType = e.type
    alert(evtType)
    // displays click, or whatever the event type was
}

Siempre he aceptado que es así, pero ahora tengo algunas preguntas (esto es muy confuso para mí):

1. ¿De dónde viene esto? Cuando miro todo el archivo JavaScript, parece que e no existe en absoluto.
2. ¿Por qué pasar este parámetro e a las funciones? ¿Dejarán de funcionar las funciones si no se las paso?

3. Considere el bloque de código a continuación. Hay una variable de evento ( e ) pasada a una función interna anónima. Digamos que quiero usar un objeto de evento fuera de la función anónima (tal vez en una línea arriba / debajo de la línea element.onkeypress ). ¿Cómo puedo hacer esto?

   element.onkeypress = function(e) {
       if(e.keyCode) {
           element.keyCode = e.keyCode;
       } else {
           element.keyCode = e.charCode;
       }
   };

Answer 1

1. Así es como funciona JS, obtienes un objeto de evento en cada devolución de llamada de evento. Contiene mucha información sobre el evento.
2. La función no dejará de funcionar si no la pasa, es opcional. Continúe y console.log el evento (e) y vea el objeto del evento y sus propiedades. Será más claro cuando vea lo que tiene.

3. Puede usarlo fuera de esa función anónima almacenándolo, por ejemplo:

   var myEvent;
   
   element.onkeypress = function(e) {
       myEvent = e;
       if(e.keyCode) {
           element.keyCode = e.keyCode;
       } else {
           element.keyCode = e.charCode;
       }
   };
   
   console.log(myEvent);

   pero debe saber que el objeto de evento es relativo solo a ese evento específico que sucedió, y considerando que debe decidir si realmente necesita hacer eso.

Answer 2

Cuando se agrega un escucha utilizando addEventListener , el primer argumento pasado a la función es un objeto Evento, por lo que se asignará al parámetro e (o cualquier nombre que se le dé al primer parámetro de la función).

Answer 3

El parámetro e que está preguntando es un objeto Event , y representa el evento que se está activando y que provocó la ejecución de su función. Realmente no tiene que ser e , puede nombrarlo como desee como todos los demás parámetros de función.

1. ¿De dónde viene esto? Cuando miro todo el archivo javascript, parece que e no existe en absoluto.

No podrá encontrar esta variable e en su archivo javascript porque realmente no está allí, pero proviene del motor javascript que ejecuta su función de devolución de llamada.

Cuando element.onkeypress = function(e) { ... } una función de devolución de llamada para algún evento (por ejemplo, element.onkeypress = function(e) { ... } ), le está dando al motor de JavaScript una función para ejecutar / llamar cuando se element.onkeypress = function(e) { ... } ese evento y cuando se ejecuta / llama a su La función de devolución de llamada pasa a lo largo de un objeto Event que representa el evento que acaba de suceder. Javascript podría estar haciendo algo como esto para llamar a su función de devolución de llamada:

var e = new Event();
callbackFunction(e);

y de ahí proviene el objeto Event e .

2. ¿Por qué pasar este parámetro e a las funciones? ¿La función dejará de funcionar si no le paso e?

La función no dejará de funcionar si no tiene el parámetro e . Pero si necesita acceder a algunos detalles sobre el evento que causó la ejecución de su función, necesitará el parámetro e para obtenerlos.

3. Considere el siguiente bloque de código, hay una variable de evento (e) pasada a una función interna anónima. Digamos que quiero usar un objeto de evento fuera de la función anónima (tal vez en una línea arriba / debajo de la línea element.onkeypress), ¿cómo puedo hacer esto?

No creo que pueda hacer esto, incluso si lo almacena en una variable fuera del alcance de su función de devolución de llamada. Esto se debe a que su función no se ejecuta de inmediato cuando la declara, sino solo cuando se dispara el evento (por ejemplo, se presiona una tecla, disparando el evento ''presionar tecla'').

var event;

element.onkeypress = function(e) {
    event = e;
    ...
};

console.log(event); // => undefined

La única forma en que esto podría funcionar es cuando el código que usa la variable de event también se ejecute más tarde, específicamente después de que se ejecute la función anónima dada a onkeypress . Entonces el siguiente código podría funcionar:

var event;

element.onkeypress = function(e) {
    event = e;
    ...
};

setTimeout(function() {
    console.log(event); // => the event object, if the `keypress` event
                        //    fired before `setTimeout` calls this function
}, 100000); // <= set to very large value so that it gets run way way later

Answer 4

Haré todo lo posible para explicar de la manera más abstracta posible. La implementación real es probablemente mucho más compleja. Por lo tanto, los nombres que estoy a punto de usar son hipotéticos, pero sirven para explicar las cosas, espero;)

Cada nodo en el navegador es una implementación de la clase EventEmitter . Esta clase mantiene un objeto events que contiene clave: pares de eventType de eventType (la clave): una matriz que contiene funciones de listener (el valor).

Las dos funciones definidas en la clase EventEmitter son addEventListener y fire .

class EventEmitter {
  constructor(id) {
    this.events = {};
    this.id = id;
  }

  addEventListener(eventType, listener) {
    if (!this.events[eventType]) {
      this.events[eventType] = [];
    }

    this.events[eventType].push(listener);
  }

  fire(eventType, eventProperties) {
    if (this.events[eventType]) {
      this.events[eventType].forEach(listener => listener(eventProperties));
    }
  }
}

addEventListener es utilizado por el programador para registrar sus funciones de listener deseadas que se eventType al ejecutar su eventType deseado.

Tenga en cuenta que para cada eventType distinto, hay una matriz distinta. Esta matriz puede contener múltiples funciones de listener para el mismo tipo de eventType .

fire navegador invoca el fire en respuesta a las interacciones del usuario. El navegador sabe qué tipo de interacción se ha realizado y en qué nodo se ha realizado. Utiliza ese conocimiento para invocar el fire en el nodo apropiado con los parámetros apropiados que son eventType y eventProperties .

fire recorre la matriz asociada con el tipo de evento específico. Al recorrer la matriz, invoca cada función de listener dentro de la matriz mientras le pasa eventProperties .

Así es como se invocan las funciones de listener , registradas solo con el tipo de evento particular, una vez que se llama al fire .

A continuación se muestra una demostración. Hay 3 actores en esta demostración. Programador, navegador y usuario.

let button = document.getElementById("myButton"); // Done by the Programmer
let button = new EventEmitter("myButton"); // Done by the Browser somewhere in the background. 


button.addEventListener("click", () =>
  console.log("This is one of the listeners for the click event. But it DOES NOT need the event details.")
); // Done By the Programmer


button.addEventListener("click", e => {
  console.log(
    "This is another listener for the click event! However this DOES need the event details."
  );
  console.log(e);
}); // Done By the Programmer


//User clicks the button


button.fire("click", {
  type: "click",
  clientX: 47,
  clientY: 18,
  bubbles: true,
  manyOthers: "etc"
}); // Done By the Browser in the background

Después de que el usuario hace clic en el botón, el navegador invoca el botón de fire pasa "clic" como eventType y el objeto que contiene eventProperties . Esto hace que se invoquen todas las funciones de listener registradas en "click" eventType .

Como puede ver, el navegador SIEMPRE eventProperties . Como programador, puede o no usar esas propiedades en sus funciones de listener .

Algunas respuestas que encontré útiles en stackoveflow:

¿Dónde se almacena un evento registrado con addEventListener?

¿Dónde se almacenan los controladores de eventos Javascript?

Answer 5

La e es la abreviatura de event

La forma más sencilla de crear un evento es hacer clic en algún lugar de la página.

Cuando hace clic, se activa un evento de click . Este event es en realidad un objeto que contiene información sobre la acción que acaba de suceder. En el caso de este ejemplo, el evento tendría información como las coordenadas del clic ( event.screenX por ejemplo), el elemento en el que hizo clic ( event.target ) y mucho más.

Ahora, los eventos ocurren todo el tiempo, sin embargo, no está interesado en todos los eventos que suceden. Sin embargo, cuando está interesado en algún evento, es cuando agrega un detector de eventos al elemento que sabe que creará eventos [1]. Por ejemplo, está interesado en saber cuándo el usuario hace clic en el botón ''Suscribir'' y desea hacer algo cuando ocurre este evento.

Para hacer algo con respecto a este evento, debe vincular un controlador de eventos al botón que le interese. La forma de vincular el controlador al elemento es haciendo element.addEventListener(eventName, handler) .

eventName es una cadena y es el nombre del evento que le interesa, en este caso, sería ''click'' (para el evento click ).

El controlador es simplemente una función que hace algo (se ejecuta) cuando ocurre el evento. La función de controlador, de forma predeterminada, cuando se ejecuta, pasa el objeto de event (que se creó cuando sucedió el evento / acción que le interesa) como argumento .

Definir el event como un parámetro de su función de controlador es opcional pero, a veces (la mayoría de las veces), es útil que la función de controlador sepa sobre el evento que sucedió. Cuando lo define, esta es la e que ve en las funciones como las que mencionó . Recuerde, el event es solo un objeto JavaScript normal, con muchas propiedades.

Espero que haya ayudado.

Para obtener más información, lea Crear y desencadenar eventos

En cuanto a su tercera pregunta, ahora debe saber que no puede hacer eso, porque e solo existe cuando ocurre un evento. Podría tener la función de controlador, que tiene acceso al objeto e cuando se ejecuta, para almacenarlo en alguna variable global y trabajar en eso.

[1] Eso no es exactamente correcto, pero es más fácil de entender. Lo más correcto es decir "agregar un detector de eventos al elemento que sabe que los eventos fluirán a través de él". Vea this para más información