[maciorqa]

Hej, może mi ktoś wyjaśnić pewną rzecz związaną z obiektem Event w JavaScript?

Np mamy taki fragment kodu:

document.body.addEventListener('mousemove', function(e){
console.log(e.clientX, e.clientY);
})

No i mamy tutaj wywołanie na body metody addEventListener - jako zdarzenie przyjmujemy ruch myszki na body. Następnie mamy funkcję anonimową, która jako argument przyjmuje zmienną o nazwie 'e'. Następnie za pomocą tej zmiennej możemy się odwoływać do obiektu Event i tutaj np za pomocą clientX i clientY wyświetlamy w konsoli położenie kursora myszy w oknie przeglądarki za każdym razem, kiedy ją przesuwamy.

I teraz moje pytanie, o co chodzi z tym parametrem e? Na początku widziałem kod, w którym ten parametr nazywał się event i myślałem, że jest to związane z nazwą "Event" i po prostu zmiennej o takiej nazwie trzeba używać, aby odwoływać się do obiektu Event. Jednak potem zobaczyłem, że ten parametr równie dobrze może się nazywać 'evnt' albo nawet sama literka 'e'. Może mi ktoś wytłumaczyć, dlaczego nazwa tego parametru może być w zasadzie dowolna, a i tak JS "wie", że to się będzie odnosić do obiektu Event?

Czy tu chodzi o to, ze skoro po kropce piszę np clientX, to JS to rozpoznaje, że tutaj chodzi o obiekt Event, więc pobiera odpowiednie dane, w tym przypadku pozycję kursora?

I jeszcze jedno: czy ten parametr odnoszący się do obiektu Event musi być pierwszy parametrem w funkcji? Czy może być w dowolnym miejscu?

#frontend #javascript #webdev #naukaprogramowania #programowanie

[magic96]

@maciorqa: przeglądarka wywołuje listener z konkretną wartością, jako pierwszy argument podaje dane o zdarzeniu, które dostajesz w zmiennej o nazwie takiej, jaką zadeklarowałeś na pierwszej pozycji - w Twoim przypadku jest to właśnie "e". Obiekt z informacją o zdarzeniu ma swoje pola, np. clientX.

[swango]

@maciorqa nazwa może być dowolna bo liczy się tylko kolejność argumentów w twojej anonimowej funkcji. Więc js wie że jeśli to jest pierwszy argument to będzie typu event i możesz dzięki temu mieć nazwę jaką chcesz

[r9292]

@maciorqa: popatrz co to są callbacki i jak samemu je tworzyc to zrozumiesz. Tak samo działa np. forEach

[maciorqa]

@zwei: @swango: @magic96: A mam pytanie, może dziwne, ale:

byłaby jakaś różnica, gdyby zamiast funkcji anonimowej była tu funkcja strzałkowa? xd
Bo prawdę mówiąc w tym przykładzie była domyślnie funkcja strzałkowa, ale jak przepisywałem to na mirko, to zmieniłem na anonimową i nie wiem, czy coś to zmienia. xd

[lobo]

@maciorqa: Tak jak w każdej funkcji nazwa parametru nie ma znaczenia

function a(dupa){}
function b(test) {}

oznacza tylko w jaki sposób możemy dostać się do przekazanych parametrów ze środka funkcji

Natomiast kolejność ma jak najbardziej znaczenie
document.body.addEventListener('mousemove', function(e){ })
równie dobrze mógłby być
function test(e) {}
document.body.addEventListener('mousemove',test)

2 parametr w addEventListener przyjmuje po prostu funkcje którą będzie odpalał z odpowiednimi parametrami
https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

[swango]

@maciorqa w strzałkowej nie będziesz miał niczego pod this, ale poza tym bez zmian

[magic96]

@maciorqa: w niektórych przypadkach byś dostawał różne wartości kontekstu dostępnego pod słowem kluczowym this

[lobo]

@maciorqa: możesz użyć strzałkowej

[maciorqa]

@zwei

czemu usunąłeś komentarz? :/
Twoje tłumaczenie było chyba najlepsze, ale zapomniałem już co napisałeś. xd
Napisz to jeszcze raz, chociaż mi na PW xd

[zwei]

@maciorqa: usunąłem, bo jak kliknąłem dodaj, to już 2 ludzi ci odpowiedziało praktycznie to samo i moim zdaniem lepiej xd

[maciorqa]

@zwei: możesz napisać jeszcze raz xd

[maciorqa]

@zwei: a dobra, w sumie magic96 napisał tak, że już zrozumiałem. :)
Dzięki.

[alex-fortune]

@maciorqa: nie ma to znaczenia. Dodajesz listener, ten listener musi spełniać odpowiedni kontrakt - posiadać odpowiednią sygnaturę, w tym wypadku jest to funkcja anonimowa z jednym argumentem. To, jako nazwiesz sobie ten argument z punktu widzenia sygnatury funkcji ma zerowe znaczenie.

[maciorqa]

@magic96: Czyli o ile dobrze zrozumiałem, to w momencie wywołania zdarzenia, przeglądarka do pierwszego argumentu przekazuje do funkcji informacje o tym zdarzeniu? Czyli z tego wynika, że :

1. Jak funkcja ma tylko jeden argument, to on zawsze będzie się odnosił do obiektu Event.
2. Jeżeli chcemy się odnosić do obiektu Event, to tylko pierwszy argument może być z nim związany, więc dopiero drugi i następne argumenty mogą przyjmować jakieś tam

[magic96]

@maciorqa: gwoli ścisłości, przeglądarka "triggeruje" to zdarzenie i odpalane są zarejestrowane handlery, czyli funkcje obsługujące konkretne zdarzenie. Jeśli chcesz przekazywać do tego handlera jakieś zmienne poza samą informacją o zdarzeniu, to możesz sobie albo zarejestrować to w locie jako funkcja strzałkowa:

const dupa = 123;
const handler = (event, someValue) => {
// do anything
};

document.body.addEventListener('mousemove', (event) => { handler(event, dupa); }, false);

[maciorqa]

@magic96: czyli o to mi chodziło, to musi być w pierwszym argumencie, a jeżeli chcę coś przekazać do funkcji, to muszę to zrobić pod drugi argument.

A gdybym w funkcji miał tylko jeden argument i do niego coś przekazał. To jak się odnieść do obiektu Event?

[magic96]

@maciorqa: w sensie handler z jednym argumentem, którym jest przekazana jakaś inna wartość niż informacja o zdarzeniu? Nie rozumiem trochę po co coś takiego robić ( ͡° ͜ʖ ͡°)

[maciorqa]

@magic96: No tak, mamy funkcję którą wywołujemy w addEventListener i ta funkcja ma jeden argument, ale przekazujemy do niego jakąś wartość. Więc jak wtedy odnieść się do obiektu Event, skoro jedyny argument w funkcji ma przekazaną jakąś wartość. Pytam czysto teoretycznie, bo teraz wiem, że w takim przypadku trzeba zrobić funkcję z dwoma argumentami i wtedy pierwszy jest do Event, a drugi przyjmuje jakąś wartość. ( ͡° ͜ʖ ͡

[magic96]

@maciorqa: no to nie zrobisz tak, musisz użyć dwóch argumentów co najmniej, do docelowej funkcji, czyli tak jak w przykładzie wyżej tej strzałkowej zawsze leci jako pierwszy argument event, funkcja strzałkowa to taki jakby middleware, gdzie możesz sobie zapożyczyć z obecnego zakresu zmiennych jakąś wartość i wypchnąć ją wyżej. W praktyce handlery wykorzystują zazwyczaj tylko jeden argument, którym jest właśnie informacja o zdarzeniu.