Przenoszenie JavaScriptu ze strony internetowej

To jest zło sposób użycia onclick, chyba że masz rzeczywisty znaczący adres w atrybucie href, aby osoby bez JavaScript zostały przeniesione gdzieś po kliknięciu linku. Wiele osób pomija również „return false” w tym kodzie, a następnie zastanawia się, dlaczego górna część bieżącej strony jest zawsze ładowana po uruchomieniu skryptu (a właśnie to polecenie href=„#” nakazuje stronie, chyba że false jest zwracany ze wszystkich programów obsługi zdarzeń.Oczywiście, jeśli masz coś znaczącego jako miejsce docelowe linku, możesz chcieć się tam udać po uruchomieniu kodu onclick i wtedy nie będziesz potrzebować 'return false'.

Wiele osób nie zdaje sobie sprawy, że można dodać obsługę zdarzeń onclick do każdy Tag HTML na stronie internetowej w celu interakcji, gdy odwiedzający kliknie tę treść. Jeśli więc chcesz, aby coś się uruchamiało, gdy ludzie klikają obraz, możesz użyć:

Jeśli chcesz uruchomić coś, gdy ludzie klikną jakiś tekst, możesz użyć:

Oczywiście nie dają one automatycznej wizualnej wskazówki, że pojawi się odpowiedź, jeśli odwiedzający kliknie na nie w sposób, w jaki robi to link, ale możesz łatwo dodać tę wizualną wskazówkę, odpowiednio stylizując obraz lub rozciągając.

Inną rzeczą, na którą należy zwrócić uwagę przy tych sposobach dołączania obsługi zdarzeń onclick, jest to, że nie wymagają one „return false”, ponieważ nie ma domyślnej akcji, która nastąpi po kliknięciu elementu, który musi zostać wyłączony.

Te sposoby dołączania onclick są dużym ulepszeniem w stosunku do kiepskiej metody, z której korzysta wiele osób, ale wciąż daleko do najlepszego sposobu jej kodowania. Jednym z problemów związanych z dodawaniem onclick przy użyciu dowolnej z powyższych metod jest to, że nadal miesza się kod JavaScript z kodem HTML. na kliknięcie jest nie atrybut HTML, jest to procedura obsługi zdarzeń JavaScript. W związku z tym, aby oddzielić nasz kod JavaScript od naszego kodu HTML, aby ułatwić utrzymanie strony, musimy umieścić odwołanie onclick z pliku HTML do osobnego pliku JavaScript, do którego należy.

Najprostszym sposobem na to jest zastąpienie onclick w kodzie HTML przez ID to ułatwi dołączenie obsługi zdarzeń do odpowiedniego miejsca w kodzie HTML. Więc nasz kod HTML może teraz zawierać jedno z tych stwierdzeń:

Następnie możemy zakodować JavaScript w osobnym pliku JavaScript, który jest albo połączony w dolnej części strony lub w nagłówku strony, a nasz kod znajduje się w funkcji, która jest wywoływana po zakończeniu ładowania strony . Nasz JavaScript do dołączania obsługi zdarzeń wygląda teraz tak:

Jedna rzecz do zapamiętania. Zauważysz, że zawsze pisaliśmy onclick całkowicie małymi literami. Kiedy kodujesz oświadczenie w swoim kodzie HTML, zobaczysz, że niektórzy ludzie piszą je jako onClick. Jest to błędne, ponieważ wszystkie nazwy programów obsługi zdarzeń JavaScript są pisane małymi literami i nie ma takiego modułu obsługi jak onClick. Możesz sobie z tym poradzić, umieszczając kod JavaScript bezpośrednio w tagu HTML, ponieważ w HTML nie jest rozróżniana wielkość liter, a przeglądarka zmapuje go na poprawną nazwę. Nie możesz uciec od złej wielkości liter w samym JavaScript, ponieważ JavaScript rozróżnia wielkość liter i nie ma czegoś takiego w JavaScript jak onClick.

Ten kod jest ogromnym ulepszeniem w stosunku do poprzednich wersji, ponieważ teraz zarówno dołączamy zdarzenie do właściwego elementu w naszym HTML, jak i mamy JavaScript całkowicie oddzielony od HTML. Możemy jednak jeszcze bardziej to poprawić.

Jedynym problemem, który pozostaje, jest to, że możemy dołączyć tylko jeden moduł obsługi zdarzenia onclick do określonego elementu. Jeśli w dowolnym momencie będziemy musieli dołączyć inny moduł obsługi zdarzenia onclick do tego samego elementu, to poprzednio dołączone przetwarzanie nie będzie już dołączone do tego elementu. Kiedy dodajesz wiele różnych skryptów do swojej strony internetowej w różnych celach, istnieje przynajmniej możliwość, że dwa lub więcej z nich może chcieć zapewnić pewne przetwarzanie, które zostanie wykonane po kliknięciu tego samego elementu. Brudnym rozwiązaniem tego problemu jest określenie, gdzie ta sytuacja się pojawia i połączenie przetwarzania, które należy wywołać razem, z funkcją, która wykonuje całe przetwarzanie.

Chociaż takie starcia są mniej powszechne w przypadku onclick niż w przypadku obciążenia, konieczność wcześniejszej identyfikacji kolizji i łączenia ich ze sobą nie jest idealnym rozwiązaniem. Wcale nie jest to rozwiązanie, gdy faktyczna obróbka, która musi być dołączona do elementu, zmienia się w czasie, tak że czasami jest jedna rzecz do zrobienia, czasami inna, a czasami obie.

Najlepszym rozwiązaniem jest całkowite zaprzestanie używania modułu obsługi zdarzeń i zamiast tego użycie detektora zdarzeń JavaScript (wraz z odpowiednim attachEvent dla Jscript- ponieważ jest to jedna z tych sytuacji, w których JavaScript i JScript różnią się). Najłatwiej to zrobić, tworząc najpierw funkcję addEvent, która doda albo detektor zdarzeń, albo załącznik, w zależności od tego, który z nich obsługuje uruchamiany język;

Możemy teraz dołączyć przetwarzanie, które chcemy, aby nastąpiło po kliknięciu naszego elementu za pomocą:

Użycie tej metody dołączania kodu do przetworzenia po kliknięciu elementu oznacza, że ​​wykonanie kolejnego wywołania addEvent w celu dodania kolejnej funkcji do uruchomienia po kliknięciu określonego elementu nie zastąpi wcześniejszego przetwarzania nowym przetwarzaniem, ale zamiast tego pozwoli obie funkcje do uruchomienia. Podczas wywoływania addEvent nie musimy wiedzieć, czy mamy już dołączoną do elementu funkcję, która ma zostać uruchomiona po kliknięciu, nowa funkcja zostanie uruchomiona wraz z funkcjami, które były wcześniej dołączone.

Czy powinniśmy potrzebować możliwości usuwania funkcji z tego, co jest uruchamiane po kliknięciu elementu, a następnie możemy utworzyć odpowiednią funkcję deleteEvent, która wywołuje odpowiednią funkcję do usuwania detektora zdarzeń lub dołączonego zdarzenia?

Jedyną wadą tego ostatniego sposobu dołączania przetwarzania jest to, że naprawdę stare przeglądarki nie obsługują tych stosunkowo nowych sposobów dołączania przetwarzania zdarzeń do strony internetowej. Powinno być wystarczająco mało osób używających tak przestarzałych przeglądarek, aby zignorować je w tym, co piszemy w J(ava)Script, poza pisaniem naszego kodu w taki sposób, aby nie powodował ogromnej liczby komunikatów o błędach. Powyższa funkcja jest napisana tak, aby nic nie robiła, jeśli żaden z jej sposobów nie jest obsługiwany. Większość z tych naprawdę starych przeglądarek również nie obsługuje metody odwoływania się do HTML-a getElementById, a więc prosty if (!document.getElementById) zwraca false; u góry dowolnej funkcji, która wykonuje takie wywołania, również byłaby odpowiednia. Oczywiście wiele osób piszących JavaScript nie zwraca uwagi na tych, którzy wciąż używają starych przeglądarek, więc ci użytkownicy muszą przyzwyczaić się do wyświetlania błędów JavaScript na prawie każdej odwiedzanej stronie internetowej.

Które z tych różnych sposobów używasz, aby dołączyć przetwarzanie do swojej strony, aby było uruchamiane, gdy użytkownicy coś klikną? Jeśli sposób, w jaki to robisz, jest bliższy przykładom na górze strony niż przykładom na dole strony, to być może nadszedł czas, abyś pomyślał o ulepszeniu sposobu pisania przetwarzania onclick, aby użyć jednej z lepszych metod przedstawione niżej na stronie.

Patrząc na kod dla detektora zdarzeń w różnych przeglądarkach, zauważysz, że istnieje czwarty parametr, który wywołaliśmy uC , którego użycie nie wynika z wcześniejszego opisu.

Przeglądarki mają dwie różne kolejności, w których mogą przetwarzać zdarzenia po wyzwoleniu zdarzenia. Mogą działać od zewnątrz do wewnątrz, od tagu do tagu, który wywołał zdarzenie, lub od wewnątrz na zewnątrz, zaczynając od najbardziej konkretnego tagu. Te dwa są nazywane zdobyć oraz bańka Odpowiednio, a większość przeglądarek pozwala wybrać kolejność, w której ma być uruchamiane wielokrotne przetwarzanie, ustawiając ten dodatkowy parametr.

• uC = prawda do przetwarzania podczas fazy przechwytywania
• uC = false do przetwarzania podczas fazy bąbelkowej.

Jeśli więc istnieje kilka innych tagów owiniętych wokół tego, który zdarzenie zostało wyzwolone w fazie przechwytywania, rozpoczyna się najpierw od tagu najbardziej zewnętrznego i przesuwa się w kierunku tego, który wyzwolił zdarzenie, a następnie po przetworzeniu tagu, do którego zostało dołączone zdarzenie. faza bąbelkowa odwraca proces i ponownie wychodzi.

Internet Explorer i tradycyjne programy obsługi zdarzeń zawsze przetwarzają fazę bąbelkową, a nigdy fazę przechwytywania, dlatego zawsze zaczynają się od najbardziej konkretnego tagu i pracują na zewnątrz.

Tak więc z obsługą zdarzeń:

klikając na XX wypłynie najpierw wyzwalając alert ('b'), a następnie alert ('a').

Gdyby te alerty zostały dołączone za pomocą detektorów zdarzeń z wartością uC true, wszystkie nowoczesne przeglądarki z wyjątkiem Internet Explorera najpierw przetworzyłyby alert ('a'), a następnie alert ('b').