In Javascript / jQuery cosa significa (e)?


95

Sono nuovo in JavaScript / jQuery e ho imparato come creare funzioni. Molte funzioni sono state visualizzate con (e) tra parentesi. Lascia che ti mostri cosa intendo:

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

Sembra sempre che la funzione non utilizzi nemmeno il valore di (e), quindi perché è presente così spesso?

Risposte:


102

eè il breve riferimento var per l' eventoggetto che verrà passato ai gestori di eventi.

L'oggetto evento ha essenzialmente molti metodi e proprietà interessanti che possono essere utilizzati nei gestori di eventi.

Nell'esempio che hai pubblicato c'è un gestore di clic che è un file MouseEvent

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

DEMO - Eventi del mouse DEMO utilizzae.whichee.type

Alcuni riferimenti utili:

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


lol, questa sembra quasi una domanda stupida, ma non di meno, è nel posto giusto., Potresti voler ulteriormente rispondere con un esempio del suo utilizzo rispetto ai normali js (non che ci sia un dif, ma come è usato in jQuery in somiglianza con js)
SpYk3HH

@ SpYk3HH d'accordo. Pianificazione per farlo.
Selvakumar Arumugam

@SelvakumarArumugam Quindi non sono così sicuro che siano la stessa cosa. Sembra che uno restituisca w.Event e l'altro restituisca MouseEvent. Per l'esempio sopra penso che siano abbastanza simili, ma nel caso di $ (document) .on ('click', '.btn', e => {console.log (e); console.log (event)} ); i due sono diversi. Specifico per e.currentTarget e event.currentTarget. In questo caso e.currentTarget ti darà ciò di cui hai bisogno, ma event.currentTarget restituisce il documento e non il pulsante su cui hai fatto clic.
Adam Youngers

Guardando le risposte direi che l'evento === e.originalEvent, e che e contiene un po 'più di dettagli.
Adam Youngers


46

DISCLAIMER: Questa è una risposta molto tardiva a questo particolare post, ma poiché ho letto varie risposte a questa domanda, mi ha colpito che la maggior parte delle risposte utilizza una terminologia che può essere compresa solo da programmatori esperti. Questa risposta è un tentativo di affrontare la domanda originale con un pubblico inesperto in mente.

Intro

La piccola cosa " (e) " è in realtà parte dell'ambito più ampio di qualcosa in Javascript chiamato funzione di gestione degli eventi. Ogni funzione di gestione degli eventi riceve un oggetto evento. Ai fini di questa discussione, pensa a un oggetto come a una "cosa" che contiene un gruppo di proprietà ( variabili ) e metodi ( funzioni ), proprio come gli oggetti in altri linguaggi. La maniglia, la ' e ' all'interno della piccola (e) cosa, è come una variabile che ti permette di interagire con l'oggetto (e io uso il termine variabile MOLTO liberamente).

Considera i seguenti esempi di jQuery:

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

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

Spiegazione

  • "#someLink" è il tuo selettore di elementi (quale tag HTML lo attiverà).
  • "click" è un evento (quando si fa clic sull'elemento selezionato).
  • "function (e)" è la funzione di gestione degli eventi (in caso di evento, l'oggetto viene creato).
  • "e" è il gestore dell'oggetto (l'oggetto è reso accessibile).
  • "preventDefault ()" è un metodo (funzione) fornito dall'oggetto.

Cosa sta succedendo?
Quando un utente fa clic sull'elemento con l'id "#someLink" (probabilmente un anchor tag), chiama una funzione anonima, "function (e)" e assegna l'oggetto risultante a un gestore, "e" . Ora prendi quel gestore e chiama uno dei suoi metodi, "e.preventDefault ()" , che dovrebbe impedire al browser di eseguire l'azione predefinita per quell'elemento.

Nota: l'handle può praticamente essere chiamato come vuoi (es. ' Function (billybob) '). La "e" sta per "evento", che sembra essere piuttosto standard per questo tipo di funzione.

Sebbene 'e.preventDefault ()' sia probabilmente l'uso più comune del gestore di eventi, l'oggetto stesso contiene molte proprietà e metodi a cui è possibile accedere tramite il gestore di eventi.

Alcune informazioni davvero valide su questo argomento possono essere trovate sul sito di apprendimento di jQuery, http://learn.jquery.com . Prestare particolare attenzione alle sezioni Utilizzo di jQuery Core ed Eventi .


29

enon ha alcun significato speciale. È solo una convenzione da utilizzare ecome nome del parametro della funzione quando il parametro è event.

Può essere

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

anche.


8

In questo esempio, eè solo un parametro per quella funzione, ma è l' eventoggetto che viene passato attraverso di essa.


7

L' eargomento è l'abbreviazione dell'oggetto evento. Ad esempio, potresti voler creare codice per ancore che annulli l'azione predefinita. Per fare questo dovresti scrivere qualcosa come:

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

Ciò significa che quando si <a>fa clic su un tag, si impedisce l'azione predefinita dell'evento clic.

Sebbene tu possa vederlo spesso, non è qualcosa che devi usare all'interno della funzione anche se lo hai specificato come argomento.


4

In jQuery eabbreviazione di event, l'oggetto evento corrente. Di solito viene passato come parametro per la funzione evento da attivare.

Demo: jQuery Events

Nella demo che ho usato e

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

Potrei anche aver usato event

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

Stessa cosa!

I programmatori sono pigri, usiamo molte stenografie, in parte riducono il nostro lavoro, in parte aiutano con la leggibilità. Capire questo ti aiuterà a capire la mentalità di scrivere codice.


4

Oggi ho appena scritto un post su "Perché usiamo lettere come" e "in e.preventDefault ()?" e penso che la mia risposta avrà un senso ...

Inizialmente, vediamo la sintassi di addEventListener

Normalmente sarà: target.addEventListener (type, listener [, useCapture]);

E la definizione dei parametri di addEventlistener sono:

tipo: Una stringa che rappresenta il tipo di evento da ascoltare.

listener: L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia Event) quando si verifica un evento del tipo specificato. Deve essere un oggetto che implementa l'interfaccia EventListener o una funzione JavaScript.

(Da MDN)

Ma penso che ci sia una cosa da sottolineare: quando usi la funzione Javascript come listener, l'oggetto che implementa l'interfaccia Event (evento oggetto) verrà automaticamente assegnato al "primo parametro" della funzione. Quindi, se usi funzione (e), l'oggetto verrà assegnato a "e" perché "e" è l'unico parametro della funzione (sicuramente il primo!), quindi puoi usare e.preventDefault per impedire qualcosa ....

proviamo l'esempio come di seguito:

<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>

il risultato sarà: [object MouseEvent] 5 e impedirai l'evento click.

ma se rimuovi il segno di commento come:

<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>

riceverai: 8 e un errore : "Uncaught TypeError: e.preventDefault non è una funzione in HTMLInputElement. (VM409: 69)".

Certamente, questa volta l'evento click non verrà impedito. Perché la "e" è stata definita nuovamente nella funzione.

Tuttavia, se modifichi il codice in:

<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>

ogni cosa funzionerà di nuovo correttamente ... otterrai 8 e l'evento clic sarà impedito ...

Pertanto, "e" è solo un parametro della funzione e occorre una "e" in function () per ricevere l '"oggetto evento", quindi eseguire e.preventDefault (). Questo è anche il motivo per cui puoi cambiare la "e" con qualsiasi parola che non sia riservata da js.


2

È un riferimento all'oggetto evento corrente


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

In riferimento al codice precedente
$(this)è l'elemento che come una variabile.
clickè l'evento che deve essere eseguito.
il parametro eviene automaticamente passato da js alla funzione che contiene il valore di $(this)value e può essere utilizzato ulteriormente nel codice per eseguire alcune operazioni.


e su un click handler contiene l'evento javascript dell'elemento cliccato e non il valore di $ (this).
Gerben Jongerius
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.