Presun JavaScriptu z webovej stránky

To je nesprávne spôsob, ako použiť onclick, pokiaľ nemáte skutočnú zmysluplnú adresu v atribúte href, takže tí, ktorí nemajú JavaScript, sa po kliknutí na odkaz niekam presunú. Mnoho ľudí tiež vynecháva z tohto kódu „return false“ a potom sa čudujú, prečo sa po spustení skriptu vždy načíta horná časť aktuálnej stránky (čo je to, čo href='#' hovorí stránke, aby urobila, pokiaľ Všetky obslužné programy udalostí vrátia hodnotu false. Samozrejme, ak máte ako cieľ odkazu niečo zmysluplné, možno budete chcieť ísť tam po spustení kódu onclick a potom nebudete potrebovať „return false“.

Mnoho ľudí si neuvedomuje, že je možné pridať obsluhu udalosti onclick akýkoľvek HTML tag na webovej stránke za účelom interakcie, keď váš návštevník klikne na daný obsah. Ak teda chcete, aby sa niečo spustilo, keď ľudia kliknú na obrázok, môžete použiť:

Ak chcete niečo spustiť, keď ľudia kliknú na nejaký text, môžete použiť:

Samozrejme, neposkytujú automatickú vizuálnu stopu, že ak na ne váš návštevník klikne tak, ako na odkaz, dôjde k odozve, ale túto vizuálnu stopu môžete pridať sami dostatočne jednoduchým prispôsobením obrázka alebo vhodným rozpätím.

Ďalšou vecou, ​​​​ktorú je potrebné poznamenať o týchto spôsoboch pripojenia obsluhy udalosti onclick, je to, že nevyžadujú „return false“, pretože neexistuje žiadna predvolená akcia, ktorá sa stane, keď sa klikne na prvok, ktorý je potrebné deaktivovať.

Tieto spôsoby pripojenia onclick sú veľkým vylepšením zlej metódy, ktorú mnohí ľudia používajú, ale stále je to ďaleko od toho, aby to bol najlepší spôsob kódovania. Jedným z problémov pri pridávaní onclick pomocou ktorejkoľvek z vyššie uvedených metód je, že stále mieša váš JavaScript s vaším HTML. po kliknutí je nie atribút HTML, ide o obsluhu udalosti JavaScriptu. Preto, aby sme oddelili náš JavaScript od nášho HTML, aby sa stránka ľahšie udržiavala, musíme dostať odkaz na kliknutie zo súboru HTML do samostatného súboru JavaScript, kam patrí.

Najjednoduchší spôsob, ako to urobiť, je nahradiť onclick v HTML kódom id to uľahčí pripojenie obsluhy udalosti na príslušné miesto v HTML. Takže náš kód HTML môže teraz obsahovať jeden z týchto príkazov:

Potom môžeme kód JavaScript zakódovať v samostatnom súbore JavaScript, ktorý je buď prepojený v spodnej časti tela stránky, alebo ktorý je v hlavičke stránky a kde sa náš kód nachádza vo funkcii, ktorá sa sama volá po dokončení načítania stránky. . Náš JavaScript na pripojenie obslužných programov udalostí teraz vyzerá takto:

Treba poznamenať jednu vec. Všimnete si, že onclick sme vždy písali celé malými písmenami. Pri kódovaní príkazu vo svojom HTML uvidíte, že niektorí ľudia ho napíšu ako onClick. Toto je nesprávne, pretože názvy obslužných nástrojov udalostí JavaScript sú všetky malé písmená a neexistuje žiadny obslužný nástroj ako onClick. Prejde vám to, keď zahrniete JavaScript priamo do svojej značky HTML, pretože HTML nerozlišuje veľké a malé písmená a prehliadač ho namapuje na správny názov. V samotnom JavaScripte nemôžete uniknúť nesprávnej kapitalizácii, pretože JavaScript rozlišuje veľké a malé písmená a v JavaScripte neexistuje nič také ako onClick.

Tento kód je obrovským zlepšením oproti predchádzajúcim verziám, pretože teraz pripájame udalosť k správnemu prvku v našom HTML a máme JavaScript úplne oddelený od HTML. V tomto sa však môžeme ešte zlepšiť.

Jediným problémom, ktorý zostáva, je, že ku konkrétnemu prvku môžeme pripojiť iba jednu obsluhu udalosti onclick. Ak by sme kedykoľvek potrebovali pripojiť inú obsluhu udalosti onclick k rovnakému prvku, predtým pripojené spracovanie už nebude k tomuto prvku pripojené. Keď na svoju webovú stránku pridávate množstvo rôznych skriptov na rôzne účely, existuje prinajmenšom možnosť, že dva alebo viac z nich bude chcieť vykonať určité spracovanie, keď sa klikne na rovnaký prvok. Zložitým riešením tohto problému je identifikovať, kde k tejto situácii dochádza, a skombinovať spracovanie, ktoré je potrebné volať, do funkcie, ktorá vykonáva celé spracovanie.

Zatiaľ čo kolízie tohto typu sú pri onclick menej časté ako pri onload, povinnosť identifikovať kolízie vopred a kombinovať ich nie je ideálnym riešením. Vôbec nejde o riešenie, keď sa skutočné spracovanie, ktoré je potrebné k prvku pripojiť, v priebehu času mení, takže niekedy je potrebné urobiť jednu vec, inokedy inú a niekedy oboje.

Najlepším riešením je úplne prestať používať obsluhu udalosti a namiesto toho použiť poslucháč udalostí JavaScript (spolu so zodpovedajúcou udalosťou attachmentEvent pre Jscript – pretože toto je jedna zo situácií, kde sa JavaScript a JScript líšia). Najjednoduchšie to môžeme urobiť tak, že najprv vytvoríme funkciu addEvent, ktorá pridá buď poslucháča udalostí, alebo prílohu v závislosti od toho, ktorý z týchto dvoch jazykov podporuje spustený jazyk;

Teraz môžeme pripojiť spracovanie, ktoré sa má uskutočniť, keď sa klikne na náš prvok pomocou:

Použitie tejto metódy pripojenia kódu, ktorý sa má spracovať, keď sa klikne na prvok, znamená, že ďalšie volanie addEvent na pridanie ďalšej funkcie, ktorá sa má spustiť po kliknutí na konkrétny prvok, nenahradí predchádzajúce spracovanie novým spracovaním, ale umožní obe funkcie, ktoré sa majú spustiť. Pri volaní addEvent nemusíme vedieť, či už máme k prvku pripojenú funkciu, ktorá sa má spustiť po kliknutí naň, nová funkcia sa spustí spolu s funkciami, ktoré boli predtým pripojené.

Ak by sme potrebovali možnosť odstrániť funkcie z toho, čo sa spustí, keď sa klikne na prvok, potom by sme mohli vytvoriť zodpovedajúcu funkciu deleteEvent, ktorá zavolá príslušnú funkciu na odstránenie poslucháča udalostí alebo pripojenej udalosti?

Jedinou nevýhodou tohto posledného spôsobu pripojenia spracovania je, že skutočne staré prehliadače nepodporujú tieto relatívne nové spôsoby pripojenia spracovania udalostí k webovej stránke. V súčasnosti by malo byť dosť ľudí, ktorí používajú takéto zastarané prehliadače, aby ich ignorovali v tom, čo píšeme J(ava)Script, okrem toho, že náš kód píšeme tak, aby to nespôsobovalo veľké množstvo chybových hlásení. Vyššie uvedená funkcia je napísaná tak, aby nerobila nič, ak nie je podporovaný ani jeden zo spôsobov, ktoré používa. Väčšina z týchto skutočne starých prehliadačov nepodporuje ani metódu getElementById odkazovania na HTML, a preto je if (!document.getElementById) vráti hodnotu false; v hornej časti ktorejkoľvek z vašich funkcií, ktoré takéto volania vykonávajú, by bolo tiež vhodné. Samozrejme, mnohí ľudia, ktorí píšu JavaScript, nie sú takí ohľaduplní k tým, ktorí stále používajú starožitné prehliadače, a preto si títo používatelia musia zvyknúť na to, že na takmer každej webovej stránke, ktorú doteraz navštívia, sa budú zobrazovať chyby JavaScriptu.

Ktorý z týchto rôznych spôsobov používate na pripojenie spracovania k vašej stránke, ktoré sa má spustiť, keď vaši návštevníci na niečo kliknú? Ak je spôsob, akým to robíte, bližšie k príkladom v hornej časti stránky ako k príkladom v dolnej časti stránky, možno je načase, aby ste sa zamysleli nad zlepšením spôsobu, akým píšete svoje spracovanie po kliknutí, aby ste použili jednu z lepších metód uvedené nižšie na stránke.

Pri pohľade na kód pre prijímač udalostí naprieč prehliadačmi si všimnete, že existuje štvrtý parameter, ktorý sme nazvali uC , ktorého použitie nie je zrejmé z predchádzajúceho popisu.

Prehliadače majú dve rôzne poradia, v ktorých môžu spracovávať udalosti, keď je udalosť spustená. Môžu pracovať zvonku dovnútra od značky smerom k značke, ktorá spustila udalosť, alebo môžu pracovať zvnútra smerom k najšpecifickejšej značke. Títo dvaja sú tzv zachytiť a bublina a väčšina prehliadačov vám umožňuje vybrať si, v akom poradí sa má spustiť viacnásobné spracovanie, nastavením tohto extra parametra.

• uC = true to process počas fázy zachytávania
• uC = false na spracovanie počas bublinovej fázy.

Takže tam, kde je okolo značky, ku ktorej bola udalosť spustená vo fáze zachytávania, omotaných niekoľko ďalších značiek, sa najskôr spustí najvzdialenejšia značka a presunie sa k tej, ktorá spustila udalosť, a potom, keď sa značka, ku ktorej bola udalosť pripojená, spracuje. bublinková fáza obráti proces a opäť sa vráti von.

Internet Explorer a tradičné obslužné programy udalostí vždy spracovávajú bublinovú fázu a nikdy nie fázu zachytávania, a preto vždy začínajú s najšpecifickejšou značkou a postupujú smerom von.

Takže s obsluhou udalostí:

kliknutím na xx by vybublala a spustila by výstrahu ('b') ako prvú a výstrahu ('a') ako druhú.

Ak by boli tieto upozornenia pripojené pomocou poslucháčov udalostí s hodnotou uC true, všetky moderné prehliadače okrem Internet Explorera by najskôr spracovali upozornenie ('a') a potom upozornenie ('b').