Was bedeutet (e) in Javascript / jQuery?

94

Ich bin neu in JavaScript / jQuery und habe gelernt, wie man Funktionen erstellt. Viele Funktionen sind mit (e) in Klammern aufgetaucht. Lassen Sie mich Ihnen zeigen, was ich meine:

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

Es scheint immer, dass die Funktion nicht einmal den Wert von (e) verwendet. Warum ist sie also so oft vorhanden?

kluge Bohnen
quelle

Antworten:

102

eist die kurze var-Referenz für ein eventObjekt, die an Ereignishandler übergeben wird.

Das Ereignisobjekt verfügt im Wesentlichen über viele interessante Methoden und Eigenschaften, die in den Ereignishandlern verwendet werden können.

In dem von Ihnen geposteten Beispiel handelt es sich um einen Klick-Handler MouseEvent

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

DEMO - Mausereignisse DEMO verwendete.whichunde.type

Einige nützliche Referenzen:

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
quelle
lol, das scheint fast eine dumme Frage zu sein, aber trotzdem ist sie am richtigen Ort. Vielleicht möchten Sie Ihre Antwort mit einem Beispiel für ihre Verwendung im Vergleich zu normalen js weiterführen (nicht, dass es einen Unterschied gibt, aber wie es ist verwendet in jQuery in Ähnlichkeit mit js)
SpYk3HH
@ SpYk3HH Einverstanden. Planen Sie dies.
Selvakumar Arumugam
@ SelvakumarArumugam Ich bin mir also nicht sicher, ob sie dasselbe sind. Es scheint, dass einer w.Event und der andere MouseEvent zurückgibt. Für das obige Beispiel denke ich, dass sie ähnlich genug sind, aber im Fall von $ (document) .on ('click', '.btn', e => {console.log (e); console.log (event)} ); Die beiden sind unterschiedlich. Speziell für e.currentTarget und event.currentTarget. In diesem Fall gibt Ihnen e.currentTarget das, was Sie benötigen, aber event.currentTarget gibt das Dokument zurück und nicht die Schaltfläche, auf die Sie geklickt haben.
Adam Youngers
Wenn ich mir die Antworten anschaue, würde ich sagen, dass event === e.originalEvent ist und dass e etwas mehr Details enthält.
Adam Youngers
46

HAFTUNGSAUSSCHLUSS: Dies ist eine sehr späte Antwort auf diesen bestimmten Beitrag, aber als ich verschiedene Antworten auf diese Frage gelesen habe, fiel mir auf, dass die meisten Antworten eine Terminologie verwenden, die nur von erfahrenen Programmierern verstanden werden kann. Diese Antwort ist ein Versuch, die ursprüngliche Frage für ein unerfahrenes Publikum zu beantworten.

Intro

Das kleine ' (e) ' Ding ist tatsächlich Teil eines breiteren Bereichs von etwas in Javascript, das als Ereignisbehandlungsfunktion bezeichnet wird. Jede Ereignisbehandlungsfunktion empfängt ein Ereignisobjekt. Stellen Sie sich ein Objekt für diese Diskussion als ein "Ding" vor, das eine Reihe von Eigenschaften ( Variablen ) und Methoden ( Funktionen ) enthält, ähnlich wie Objekte in anderen Sprachen. Das Handle, das ' e ' in dem kleinen (e) Ding, ist wie eine Variable, mit der Sie mit dem Objekt interagieren können (und ich verwende den Begriff Variable SEHR locker).

Betrachten Sie die folgenden jQuery-Beispiele:

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

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

Erläuterung

  • "#someLink" ist Ihre Elementauswahl (welches HTML-Tag dies auslöst).
  • "click" ist ein Ereignis (wenn auf das ausgewählte Element geklickt wird).
  • "function (e)" ist die Ereignisbehandlungsfunktion (bei einem Ereignis wird ein Objekt erstellt).
  • "e" ist der Objekthandler (Objekt wird zugänglich gemacht).
  • "PreventDefault ()" ist eine vom Objekt bereitgestellte Methode (Funktion).

Was ist los?
Wenn ein Benutzer auf das Element mit der ID "#someLink" (wahrscheinlich ein Ankertag) klickt , rufen Sie eine anonyme Funktion "function (e)" auf und weisen Sie das resultierende Objekt einem Handler "e" zu . Nehmen Sie nun diesen Handler und rufen Sie eine seiner Methoden auf, "e.preventDefault ()" , die verhindern soll, dass der Browser die Standardaktion für dieses Element ausführt.

Hinweis: Das Handle kann so ziemlich alles benannt werden, was Sie wollen (dh ' Funktion (Billybob) '). Das 'e' steht für 'event', was für diese Art von Funktion ziemlich Standard zu sein scheint.

Obwohl 'e.preventDefault ()' wahrscheinlich die häufigste Verwendung des Ereignishandlers ist, enthält das Objekt selbst viele Eigenschaften und Methoden, auf die über den Ereignishandler zugegriffen werden kann.

Einige wirklich gute Informationen zu diesem Thema finden Sie auf der Lernseite von jQuery unter http://learn.jquery.com . Achten Sie besonders auf die Abschnitte Verwenden von jQuery Core und Events .

dsanchez
quelle
29

ehat keine besondere Bedeutung. Es ist nur eine Konvention, die eals Funktionsparametername verwendet wird, wenn der Parameter ist event.

Es kann sein

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

auch.

Peter Porfy
quelle
8

In diesem Beispiel eist dies nur ein Parameter für diese Funktion, aber es ist das eventObjekt, das durch sie übergeben wird.

James Johnson
quelle
7

Das eArgument ist kurz für das Ereignisobjekt. Beispielsweise möchten Sie möglicherweise Code für Anker erstellen, der die Standardaktion abbricht. Um dies zu tun, würden Sie etwas schreiben wie:

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

Dies bedeutet <a>, dass beim Klicken auf ein Tag die Standardaktion des Klickereignisses verhindert wird.

Obwohl Sie es häufig sehen, müssen Sie es nicht innerhalb der Funktion verwenden, obwohl Sie es als Argument angegeben haben.

j08691
quelle
4

In jQuery ekurz für eventdas aktuelle Ereignisobjekt. Es wird normalerweise als Parameter für die auszulösende Ereignisfunktion übergeben.

Demo: jQuery-Ereignisse

In der Demo habe ich verwendet e

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

Ich könnte genauso gut verwendet haben event

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

Gleiche Sache!

Programmierer sind faul, wir verwenden viel Kurzschrift, teils verringert dies unsere Arbeit, teils hilft es bei der Lesbarkeit. Wenn Sie das verstehen, können Sie die Mentalität des Codeschreibens besser verstehen.

Gothburz
quelle
4

Heute habe ich gerade einen Beitrag über "Warum verwenden wir die Buchstaben" e "in e.preventDefault ()?" Geschrieben. und ich denke, meine Antwort wird einen Sinn ergeben ...

Lassen Sie uns zunächst die Syntax von addEventListener sehen

Normalerweise ist es: target.addEventListener (Typ, Listener [, useCapture]);

Und die Definition der Parameter von addEventlistener sind:

Typ : Eine Zeichenfolge, die den Ereignistyp darstellt, auf den gewartet werden soll.

Listener : Das Objekt, das eine Benachrichtigung erhält (ein Objekt, das die Ereignisschnittstelle implementiert), wenn ein Ereignis des angegebenen Typs auftritt. Dies muss ein Objekt sein, das die EventListener-Schnittstelle implementiert, oder eine JavaScript-Funktion.

(Von MDN)

Ich denke jedoch, dass eines beachtet werden sollte: Wenn Sie die Javascript-Funktion als Listener verwenden, wird das Objekt, das die Ereignisschnittstelle (Objektereignis) implementiert, automatisch dem "ersten Parameter" der Funktion zugewiesen Funktion (e), das Objekt wird "e" zugewiesen, da "e" der einzige Parameter der Funktion ist (definitiv der erste!), dann können Sie e.preventDefault verwenden, um etwas zu verhindern ....

Versuchen wir das folgende Beispiel:

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

Das Ergebnis ist: [Objekt MouseEvent] 5 und Sie verhindern das Klickereignis .

aber wenn Sie das Kommentarzeichen entfernen wie:

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

Sie erhalten: 8 und einen Fehler : "Nicht erfasster TypeError: e.preventDefault ist keine Funktion bei HTMLInputElement. (VM409: 69)".

Natürlich wird das Klickereignis diesmal nicht verhindert. Weil das "e" in der Funktion erneut definiert wurde.

Wenn Sie den Code jedoch ändern 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>

Alles wird wieder richtig funktionieren ... Sie erhalten 8 und das Klickereignis wird verhindert ...

Daher ist "e" nur ein Parameter Ihrer Funktion und Sie benötigen ein "e" in Ihrer Funktion (), um das "Ereignisobjekt" zu empfangen, und führen dann e.preventDefault () aus. Dies ist auch der Grund, warum Sie das "e" in Wörter ändern können, die nicht von js reserviert sind.

Jason Liu
quelle
2

Es ist eine Referenz auf das aktuelle Ereignisobjekt

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

In Bezug auf den obigen Code
$(this)ist das Element, das als eine Variable.
clickist das Ereignis, das durchgeführt werden muss.
Der Parameter ewird automatisch von js an Ihre Funktion übergeben, die den Wert $(this)value enthält und in Ihrem Code weiter verwendet werden kann, um eine Operation auszuführen.

kavya
quelle
e auf einem Klick-Handler enthält das Javascript-Ereignis des angeklickten Elements und nicht den Wert von $ (this).
Gerben Jongerius