Jak sprawdzić co się dzieje po kliknięcie na element?

Tutaj jest spoiler element: https://meta.stackexchange.com/questions/72877/whats-the-exact-syntax-for-spoiler-markup

Chciałbym sprawdzic jaka funkcja jest wolana po kliknieciu na spoiler. Widze ze dodawana jest klasa is-visible ale jak to się dzieje?

styleCode.initializeSpoilers = function() {
    $("body").off("click.spoilers", ".spoiler").on("click.spoilers", ".spoiler", (function(e) {
        if (e.target.classList.contains("spoiler") && !e.target.classList.contains("is-visible"))
            return e.preventDefault(),
            e.target.classList.add("is-visible"),
            !1
    }
    )),
    $(".spoiler:not([data-spoiler])").attr("data-spoiler", __tr(["Reveal spoiler"], undefined, "en", []))
}

Akurat nie wyjaśniłem tutaj za dużo, więc dopiszę jeszcze i spadam bo mam dużo do zrobienia.

Żeby namierzyć prosto taką funkcję, która modyfikuje jest masa sposobów.

Od najprostszych, możesz ctrl + f i szukać klasy is-visible, po bardziej wysublimowane, możesz dobrać się do event listenera danego elementu.
getEventListeners(), możesz też odnieść się do .click elementu bez jego wywoływania.

Dalej w tym przypadku event listener jest podpięty pod body, więc na danym elemencie nie znajdziesz tego listenera.
W tym przypadku po kliknięciu na element, jest propagowany w górę event, w drzewie DOM, aż dojdzie do body i tam jest przetwarzane w event listenerze wcześniej w handlerze jquery.

A ten jquery event handler listener jest na początku ładowania strony uruchamiany i najpierw jest odrejestrowany za pomocą .off i potem ponownie zarejestrowany za pomocą .on używając jquery, to jest tak stare, że musiałem sobie przypomnieć jak działa.
I masz tak pierwszy element to event.namespace gdzie namespace pozwala robić kilka click eventów i je jakoś odróżniać, drugi to filtruje elementy, które mają css klasę .spoiler, a następnie jest funkcja, która ma się wywołać.
Tam jest sprawdzane, czy zawiera spoiler, i czy nie ma już is-visible jak tak to przerywa dalszą propagację eventu do góry i dodaje class is-visible, a dodatkowo na końcu logicznie neguje 1, co daje false.

A tam niżej to sprawdza czy są elementy z klasą .spoiler i nie mają data-spoiler attrybutu to go dodają.

Innym sposobem namierzenia funkcji jest breakpoint na modyfikacji atrybutu, jest to domyślnie zaimplementowane w przeglądarce.
Ale zaawansowani mogą samemu takie coś napisać używając MutableObservera, mniej więcej jest to w ten sam sposób zaimplementowane.

Często zdarza się, że strona jest zabundlowana, wtedy będziesz miał zminifikowany kod, który jest trudniej czytać i cały w IIFE zbudowany.

Można się do bundlera dostać łatwo, ale trzeba to zrobić za nim uruchomi swoje funkcje, wtedy można go wymodyfikować, później można jedynie z wnętrza funkcji, bo zabezpieczenia przeglądarki na to nie pozwalają, ale można z poza przeglądarki spróbować w ostateczności.

GodOfCode. napisał(a):

Akurat nie wyjaśniłem tutaj za dużo, więc dopiszę jeszcze i spadam bo mam dużo do zrobienia.

Żeby namierzyć prosto taką funkcję, która modyfikuje jest masa sposobów.

Od najprostszych, możesz ctrl + f i szukać klasy is-visible, po bardziej wysublimowane, możesz dobrać się do event listenera danego elementu.
getEventListeners(), możesz też odnieść się do .click elementu bez jego wywoływania.

Dalej w tym przypadku event listener jest podpięty pod body, więc na danym elemencie nie znajdziesz tego listenera.
W tym przypadku po kliknięciu na element, jest propagowany w górę event, w drzewie DOM, aż dojdzie do body i tam jest przetwarzane w event listenerze wcześniej w handlerze jquery.

A ten jquery event handler listener jest na początku ładowania strony uruchamiany i najpierw jest odrejestrowany za pomocą .off i potem ponownie zarejestrowany za pomocą .on używając jquery, to jest tak stare, że musiałem sobie przypomnieć jak działa.
I masz tak pierwszy element to event.namespace gdzie namespace pozwala robić kilka click eventów i je jakoś odróżniać, drugi to filtruje elementy, które mają css klasę .spoiler, a następnie jest funkcja, która ma się wywołać.
Tam jest sprawdzane, czy zawiera spoiler, i czy nie ma już is-visible jak tak to przerywa dalszą propagację eventu do góry i dodaje class is-visible, a dodatkowo na końcu logicznie neguje 1, co daje false.

A tam niżej to sprawdza czy są elementy z klasą .spoiler i nie mają data-spoiler attrybutu to go dodają.

Innym sposobem namierzenia funkcji jest breakpoint na modyfikacji atrybutu, jest to domyślnie zaimplementowane w przeglądarce.
Ale zaawansowani mogą samemu takie coś napisać używając MutableObservera, mniej więcej jest to w ten sam sposób zaimplementowane.

Często zdarza się, że strona jest zabundlowana, wtedy będziesz miał zminifikowany kod, który jest trudniej czytać i cały w IIFE zbudowany.

Można się do bundlera dostać łatwo, ale trzeba to zrobić za nim uruchomi swoje funkcje, wtedy można go wymodyfikować, później można jedynie z wnętrza funkcji, bo zabezpieczenia przeglądarki na to nie pozwalają, ale można z poza przeglądarki spróbować w ostateczności.

Dzieki, bardzo mi to pomoglo. To teraz zalozmy ze mam kod html z kilkoma elementami spoiler. Jak mam dodac do nich wszystkich (na danej stronie) event listenery zeby po kliknieciu ta klasa is-visible sie dodawala? Czyli strona laduje moj kod html, i czy dodanie onload =initializeSpoilers do body to poprawne rozwiazanie? W sensie pod jaki event i jaki selector powinienem podpiac initializeSpoilers zeby bylo po bozemu?

Widzę, że nie zrozumiałeś, jest tylko jeden event listener przypięty do body, po prostu jak klikniesz na jakiś element, to event jest propagowany w górę, aż go ktoś nie zatrzyma, ale wszystko jest wewnątrz body więc body jest rodzicem i w pewnym momencie ten event do niego po prostu dojdzie, eventy są propagowane w górę i dół.

Element body łapie te wszystkie eventy, które są puszczane z wnętrza.

Poczytaj sobie, tam będzie lepiej wytłumaczone: https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php
Lub na innej stronie, jak ta nie pomoże wytłumaczyć.

I żeby zapobiec dalszej propagacji tego eventa robisz te

e.preventDefault()