Co w Javascript / jQuery oznacza (e)?

96

Jestem nowy w JavaScript / jQuery i uczyłem się tworzyć funkcje. Wiele funkcji zostało wyświetlonych z (e) w nawiasach. Pokażę ci, co mam na myśli:

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

Zawsze okazuje się, że funkcja nie używa nawet wartości (e), więc dlaczego jest tam tak często?

fasola
źródło

Odpowiedzi:

103

eto krótkie odwołanie do zmiennej eventobiektu, które zostanie przekazane do programów obsługi zdarzeń.

Obiekt zdarzenia zasadniczo ma wiele interesujących metod i właściwości, których można używać w programach obsługi zdarzeń.

W przesłanym przez Ciebie przykładzie jest moduł obsługi kliknięć, który jest plikiem MouseEvent

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

DEMO - zdarzenia myszy DEMO używae.whichie.type

Kilka przydatnych odniesień:

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
źródło
lol, to prawie wydaje się głupie pytanie, ale nie mniej, jest we właściwym miejscu., Możesz dalej odpowiedzieć na przykładzie jego użycia w porównaniu do zwykłego js (nie to, że istnieje różnica, ale jak to jest używany w jQuery na podobieństwo do js)
SpYk3HH
@ SpYk3HH Zgoda. Planuje to zrobić.
Selvakumar Arumugam
@SelvakumarArumugam Więc nie jestem pewien, czy to to samo. Wygląda na to, że jeden zwraca w.Event, a drugi zwraca MouseEvent. W powyższym przykładzie myślę, że są wystarczająco podobne, ale w przypadku $ (document) .on ('click', '.btn', e => {console.log (e); console.log (event)} ); te dwie rzeczy są różne. Specjalnie dla e.currentTarget i event.currentTarget. W tym przypadku e.currentTarget da ci to, czego potrzebujesz, ale event.currentTarget zwróci dokument, a nie kliknięty przycisk.
Adam Youngers,
Patrząc na odpowiedzi, powiedziałbym, że event === e.originalEvent i że e zawiera nieco więcej szczegółów.
Adam Youngers,
46

ZRZECZENIE SIĘ: To jest bardzo późna odpowiedź na ten konkretny post, ale kiedy czytałem różne odpowiedzi na to pytanie, uderzyło mnie, że większość odpowiedzi używa terminologii zrozumiałej tylko dla doświadczonych programistów. Ta odpowiedź jest próbą odpowiedzi na pierwotne pytanie z myślą o początkującej publiczności.

Intro

Mała rzecz „ (e) ” jest w rzeczywistości częścią szerszego zakresu czegoś w JavaScript zwanego funkcją obsługi zdarzeń. Każda funkcja obsługi zdarzenia otrzymuje obiekt zdarzenia. Na potrzeby tej dyskusji pomyśl o obiekcie jako o „rzeczy”, która przechowuje zbiór właściwości ( zmiennych ) i metod ( funkcji ), podobnie jak obiekty w innych językach. Uchwyt, „ e ” wewnątrz małej (e) rzeczy, jest jak zmienna, która pozwala na interakcję z obiektem (a ja używam terminu zmienna BARDZO luźno).

Rozważ następujące przykłady jQuery:

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

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

Wyjaśnienie

  • „#someLink” to selektor elementu (który tag HTML to wywoła).
  • „kliknięcie” to zdarzenie (po kliknięciu wybranego elementu).
  • „funkcja (e)” jest funkcją obsługi zdarzenia (w przypadku zdarzenia tworzony jest obiekt).
  • „e” jest obsługą obiektu (obiekt jest udostępniany).
  • „PreventDefault ()” to metoda (funkcja) udostępniana przez obiekt.

Co się dzieje?
Kiedy użytkownik kliknie element o identyfikatorze „#someLink” (prawdopodobnie tag kotwicy), wywołaj anonimową funkcję „function (e)” i przypisz wynikowy obiekt do modułu obsługi „e” . Teraz weź tę procedurę obsługi i wywołaj jedną z jej metod, „e.preventDefault ()” , co powinno uniemożliwić przeglądarce wykonanie domyślnej akcji dla tego elementu.

Uwaga: Uchwyt można nazwać dowolnie, jak chcesz (np. „ Funkcja (billybob) ”). Litera „e” oznacza „zdarzenie”, co wydaje się być dość standardowe dla tego typu funkcji.

Chociaż „e.preventDefault ()” jest prawdopodobnie najpowszechniejszym zastosowaniem procedury obsługi zdarzeń, sam obiekt zawiera wiele właściwości i metod, do których można uzyskać dostęp za pośrednictwem modułu obsługi zdarzeń.

Kilka naprawdę dobrych informacji na ten temat można znaleźć w witrynie edukacyjnej jQuery, http://learn.jquery.com . Zwróć szczególną uwagę na sekcje Korzystanie z jQuery Core i Events .

dsanchez
źródło
29

enie ma żadnego specjalnego znaczenia. Konwencja jest używana ejako nazwa parametru funkcji, gdy parametrem jest event.

To może być

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

także.

Peter Porfy
źródło
8

W tym przykładzie ejest to tylko parametr tej funkcji, ale jest to eventobiekt, który jest przez nią przekazywany.

James Johnson
źródło
7

eArgument jest skrótem od obiektu zdarzenia. Na przykład możesz chcieć utworzyć kod dla kotwic, który anuluje domyślną akcję. Aby to zrobić, napisałbyś coś takiego:

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

Oznacza to, że <a>kliknięcie tagu zapobiega domyślnemu działaniu zdarzenia kliknięcia.

Chociaż możesz to często widzieć, nie jest to coś, czego musisz używać w funkcji, nawet jeśli określiłeś to jako argument.

j08691
źródło
4

W jQuery eskrót eventod bieżącego obiektu zdarzenia. Zwykle jest przekazywany jako parametr uruchamianej funkcji zdarzenia.

Demo: jQuery Events

W wersji demonstracyjnej, której użyłem e

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

Równie dobrze mogłem użyć event

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

Ta sama rzecz!

Programiści są leniwi, używamy dużo skrótów, częściowo zmniejsza to naszą pracę, częściowo pomaga w czytelności. Zrozumienie tego pomoże ci zrozumieć mentalność pisania kodu.

Gothburz
źródło
4

Dzisiaj właśnie napisałem post na temat „Dlaczego używamy liter takich jak„ e ”w e.preventDefault ()?” i myślę, że moja odpowiedź będzie miała jakiś sens ...

Najpierw zobaczmy składnię addEventListener

Zwykle będzie to: target.addEventListener (typ, listener [, useCapture]);

A definicje parametrów addEventlistener to:

typ: Łańcuch reprezentujący typ zdarzenia, którego nasłuchujemy.

listener: Obiekt, który otrzymuje powiadomienie (obiekt implementujący interfejs Event), gdy wystąpi zdarzenie określonego typu. Musi to być obiekt implementujący interfejs EventListener lub funkcja JavaScript.

(Z MDN)

Myślę jednak, że należy zwrócić uwagę na jedną rzecz: kiedy używasz funkcji JavaScript jako nasłuchiwania, obiekt implementujący interfejs zdarzenia (zdarzenie obiektu) zostanie automatycznie przypisany do „pierwszego parametru” funkcji. Tak więc, jeśli używasz function (e), obiekt zostanie przypisany do "e", ponieważ "e" jest jedynym parametrem funkcji (na pewno pierwszym!), wtedy możesz użyć e.preventDefault, aby temu zapobiec ....

spróbujmy poniższy przykład:

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

wynikiem będzie: [obiekt MouseEvent] 5 i zapobiegniesz zdarzeniu kliknięcia.

ale jeśli usuniesz znak komentarza, taki jak:

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

otrzymasz: 8 i błąd : „Uncaught TypeError: e.preventDefault nie jest funkcją w HTMLInputElement. (VM409: 69)”.

Z pewnością zdarzenie kliknięcia nie zostanie tym razem zablokowane, ponieważ litera „e” została ponownie zdefiniowana w funkcji.

Jeśli jednak zmienisz kod na:

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

wszystko znowu będzie działać poprawnie ... otrzymasz 8 i unikniesz zdarzenia kliknięcia ...

Dlatego „e” jest tylko parametrem Twojej funkcji i potrzebujesz „e” w swojej funkcji (), aby otrzymać „obiekt zdarzenia”, a następnie wykonać e.preventDefault (). Jest to również powód, dla którego możesz zmienić „e” na dowolne słowa, które nie są zastrzeżone przez js.

Jason Liu
źródło
2

Jest to odniesienie do bieżącego obiektu zdarzenia

keune
źródło
-1
$(this).click(function(e) {
    // does something
});

W odniesieniu do powyższego kodu
$(this)jest to element będący jakąś zmienną.
clickto wydarzenie, które należy wykonać.
parametr ejest automatycznie przekazywany z js do funkcji, która przechowuje wartość $(this)value i może być dalej używana w kodzie do wykonywania pewnych operacji.

kavya
źródło
e w module obsługi kliknięcia zawiera zdarzenie javascript klikniętego elementu, a nie wartość $ (this).
Gerben Jongerius