En Javascript / jQuery, ¿qué significa (e)?

94

Soy nuevo en JavaScript / jQuery y he estado aprendiendo a crear funciones. Muchas funciones han aparecido con (e) entre paréntesis. Déjame mostrarte lo que quiero decir:

$(this).click(function(e) {
    // does something
});

Siempre parece que la función ni siquiera usa el valor de (e), entonces, ¿por qué está ahí tan a menudo?

sagaces
fuente

Respuestas:

102

e es la referencia var corta para event objeto que se pasará a los controladores de eventos.

El objeto de evento tiene esencialmente muchos métodos y propiedades interesantes que se pueden usar en los controladores de eventos.

En el ejemplo que ha publicado es un controlador de clics que es un MouseEvent

$(<element selector>).click(function(e) {
    // does something
    alert(e.type); //will return you click
}

DEMO - Usos de la demo de eventos del mousee.which ye.type

Algunas referencias útiles:

http://api.jquery.com/category/events/

http://www.quirksmode.org/js/events_properties.html

http://www.javascriptkit.com/jsref/event.shtml

http://www.quirksmode.org/dom/events/index.html

http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list

Selvakumar Arumugam
fuente
jajaja, esto casi parece una pregunta tonta, pero no obstante, está en el lugar correcto., Es posible que desee responder con un ejemplo de su uso en comparación con los js regulares (no es que haya una diferencia, sino cómo es usado en jQuery en similitud con js)
SpYk3HH
@ SpYk3HH de acuerdo. Planeando hacerlo.
Selvakumar Arumugam
@SelvakumarArumugam No estoy tan seguro de que sean lo mismo. Parece que uno devuelve w.Event y el otro devuelve MouseEvent. Para el ejemplo anterior, creo que son lo suficientemente similares, pero en el caso de $ (document) .on ('click', '.btn', e => {console.log (e); console.log (event)} ); los dos son diferentes. Específicamente para e.currentTarget y event.currentTarget. En este caso, e.currentTarget le dará lo que necesita, pero event.currentTarget devuelve el documento y no el botón en el que hizo clic.
Adam Youngers
Mirando las respuestas, diría que event === e.originalEvent, y que e contiene un poco más de detalle.
Adam Youngers
46

DESCARGO DE RESPONSABILIDAD: Esta es una respuesta muy tardía a esta publicación en particular, pero como he estado leyendo varias respuestas a esta pregunta, me sorprendió que la mayoría de las respuestas usan terminología que solo pueden entender los codificadores experimentados. Esta respuesta es un intento de abordar la pregunta original pensando en un público novato.

Intro

La pequeña ' (e) ' es en realidad parte del alcance más amplio de algo en Javascript llamado función de manejo de eventos. Cada función de manejo de eventos recibe un objeto de evento. Para el propósito de esta discusión, piense en un objeto como una "cosa" que contiene un montón de propiedades ( variables ) y métodos ( funciones ), al igual que los objetos en otros lenguajes. El identificador, la ' e ' dentro de la pequeña (e) cosa, es como una variable que te permite interactuar con el objeto (y yo uso el término variable MUY libremente).

Considere los siguientes ejemplos de jQuery:

$("#someLink").on("click", function(e){ // My preferred method
    e.preventDefault();
});

$("#someLink").click(function(e){ // Some use this method too
    e.preventDefault();
});

Explicación

  • "#someLink" es su selector de elementos (qué etiqueta HTML activará esto).
  • "clic" es un evento (cuando se hace clic en el elemento seleccionado).
  • "función (e)" es la función de manejo de eventos (en el evento, se crea el objeto).
  • "e" es el controlador de objetos (el objeto se hace accesible).
  • "preventDefault ()" es un método (función) proporcionado por el objeto.

¿Qué esta pasando?
Cuando un usuario hace clic en el elemento con la identificación "#someLink" (probablemente una etiqueta de anclaje), llame a una función anónima, "función (e)" , y asigne el objeto resultante a un controlador, "e" . Ahora tome ese controlador y llame a uno de sus métodos, "e.preventDefault ()" , que debería evitar que el navegador realice la acción predeterminada para ese elemento.

Nota: El identificador puede llamarse prácticamente como quieras (es decir, ' función (billybob) '). La 'e' significa 'evento', que parece ser bastante estándar para este tipo de función.

Aunque 'e.preventDefault ()' es probablemente el uso más común del controlador de eventos, el objeto en sí contiene muchas propiedades y métodos a los que se puede acceder a través del controlador de eventos.

Se puede encontrar información realmente buena sobre este tema en el sitio de aprendizaje de jQuery, http://learn.jquery.com . Preste especial atención a las secciones Uso de jQuery Core y Eventos .

dsanchez
fuente
29

eno tiene ningún significado especial. Es solo una convención para usar ecomo nombre de parámetro de función cuando el parámetro esevent .

Puede ser

$(this).click(function(loremipsumdolorsitamet) {
    // does something
}

también.

Peter Porfy
fuente
8

En ese ejemplo, ees solo un parámetro para esa función, pero es el eventobjeto que se pasa a través de él.

James Johnson
fuente
7

El eargumento es la abreviatura del objeto de evento. Por ejemplo, es posible que desee crear un código para anclajes que cancele la acción predeterminada. Para hacer esto, escribirías algo como:

$('a').click(function(e) {
    e.preventDefault();
}

Esto significa que cuando un <a> se hace clic etiqueta, se evita la acción predeterminada del evento de clic.

Si bien puede verlo a menudo, no es algo que deba usar dentro de la función, aunque lo haya especificado como un argumento.

j08691
fuente
4

En jQuery, eabreviatura de eventobjeto de evento actual. Por lo general, se pasa como un parámetro para que se active la función de evento.

Demostración: eventos de jQuery

En la demostración que usé e

$("img").on("click dblclick mouseover mouseout",function(e){
        $("h1").html("Event: " + e.type);
}); 

Yo también pude haber usado event

 $("img").on("click dblclick mouseover mouseout",function(event){
            $("h1").html("Event: " + event.type);
    }); 

¡La misma cosa!

Los programadores son perezosos, usamos muchas taquigrafía, en parte disminuye nuestro trabajo, en parte ayuda con la legibilidad. Comprender eso te ayudará a comprender la mentalidad de escribir código.

Gothburz
fuente
4

Hoy acabo de escribir una publicación sobre "¿Por qué usamos letras como" e "en e.preventDefault ()?" y creo que mi respuesta tendrá algún sentido ...

Primero, veamos la sintaxis de addEventListener

Normalmente será: target.addEventListener (type, listener [, useCapture]);

Y la definición de los parámetros de addEventlistener son:

tipo : una cadena que representa el tipo de evento a escuchar.

oyente : el objeto que recibe una notificación (un objeto que implementa la interfaz de eventos) cuando ocurre un evento del tipo especificado. Debe ser un objeto que implemente la interfaz EventListener o una función de JavaScript.

(De MDN)

Pero creo que hay una cosa que se debe remarcar: cuando usas la función Javascript como oyente, el objeto que implementa la interfaz del evento (evento del objeto) se asignará automáticamente al "primer parámetro" de la función. Entonces, si usas function (e), el objeto se asignará a "e" porque "e" es el único parámetro de la función (¡definitivamente el primero!), entonces puedes usar e.preventDefault para evitar algo ....

probemos el ejemplo de la siguiente manera:

<p>Please click on the checkbox control.</p>
<form>
    <label for="id-checkbox">Checkbox</label>
    <input type="checkbox" id="id-checkbox"/>

    </div>
</form>
<script>
    document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
         //var e=3;
         var v=5;
         var t=e+v;
         console.log(t);
        e.preventDefault();

    }, false);
</script>

el resultado será: [object MouseEvent] 5 y evitará el evento de clic.

pero si elimina el signo de comentario como:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            e.preventDefault();

       }, false);
   </script>

obtendrá: 8 y un error : "Uncaught TypeError: e.preventDefault no es una función en HTMLInputElement. (VM409: 69)".

Ciertamente, el evento de clic no se evitará esta vez, porque la "e" se definió nuevamente en la función.

Sin embargo, si cambia el código a:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            event.preventDefault();

       }, false);
   </script>

todo volverá a funcionar correctamente ... obtendrá 8 y se evitará el evento de clic ...

Por lo tanto, "e" es solo un parámetro de su función y necesita una "e" en su función () para recibir el "objeto de evento" y luego realizar e.preventDefault (). Esta es también la razón por la que puede cambiar la "e" por cualquier palabra que no esté reservada por js.

Jason Liu
fuente
2

Es una referencia al objeto de evento actual.

keune
fuente
-1
$(this).click(function(e) {
    // does something
});

En referencia al código anterior
$(this)es el elemento que como alguna variable.
clickes el evento que debe realizarse.
el parámetro ese pasa automáticamente de js a su función, que contiene el valor de $(this)value y se puede usar más en su código para realizar alguna operación.

kavya
fuente
e on a click handler contiene el evento javascript del elemento clicked y no el valor de $ (this).
Gerben Jongerius