Flytte JavaScript ut av nettsiden

Dette er feil måte å bruke onclick på med mindre du har en faktisk meningsfull adresse i href-attributtet, slik at de uten JavaScript blir overført et sted når de klikker på lenken. Mange mennesker utelater også 'return false' fra denne koden og lurer så på hvorfor toppen av den gjeldende siden alltid blir lastet etter at skriptet har kjørt (som er hva href='#' ber siden gjøre med mindre false returneres fra alle hendelsesbehandlere. Selvfølgelig, hvis du har noe meningsfullt som destinasjon for lenken, kan det være lurt å gå dit etter å ha kjørt onclick-koden, og da trenger du ikke 'return false'.

Det mange ikke er klar over er at onclick-hendelsesbehandleren kan legges til noen HTML-tag på nettsiden for å samhandle når besøkende klikker på det innholdet. Så hvis du vil at noe skal kjøres når folk klikker på et bilde, kan du bruke:

Hvis du vil kjøre noe når folk klikker på tekst, kan du bruke:

Disse gir selvfølgelig ikke den automatiske visuelle ledetråden om at det vil være et svar hvis besøkende klikker på dem på samme måte som en lenke gjør, men du kan legge til den visuelle ledetråden selv ved å style bildet eller spennet på riktig måte.

Den andre tingen å merke seg om disse måtene å feste onclick-hendelsesbehandleren på er at de ikke krever 'return false' fordi det ikke er noen standardhandling som vil skje når elementet klikkes på som må deaktiveres.

Disse måtene å feste onclick på er en stor forbedring i forhold til den dårlige metoden som mange bruker, men det er fortsatt en lang vei fra å være den beste måten å kode den på. Et problem med å legge til onclick ved å bruke en av metodene ovenfor er at det fortsatt blander JavaScript inn med HTML-en. ved trykk er ikke et HTML-attributt, det er en JavaScript-hendelsesbehandler. Som sådan for å skille JavaScript fra HTML-en vår for å gjøre siden enklere å vedlikeholde, må vi få den onclick-referansen ut av HTML-filen til en separat JavaScript-fil der den hører hjemme.

Den enkleste måten å gjøre dette på er å erstatte onclick i HTML-en med en id som vil gjøre det enkelt å feste hendelsesbehandleren til riktig sted i HTML-en. Så vår HTML kan nå inneholde en av disse utsagnene:

Vi kan deretter kode JavaScript i en egen JavaScript-fil som enten er koblet til bunnen av brødteksten på siden eller som er i hodet på siden og hvor koden vår er inne i en funksjon som selv kalles opp etter at siden er ferdig lastet . Vår JavaScript for å legge ved hendelsesbehandlerne ser nå slik ut:

En ting å merke seg. Du vil legge merke til at vi alltid har skrevet onclick helt med små bokstaver. Når du koder setningen i HTML-en, vil du se at noen skriver den som onClick. Dette er feil ettersom navnene på JavaScript-hendelsesbehandlerne er små bokstaver og det ikke finnes en slik behandler som onClick. Du kan komme unna med det når du inkluderer JavaScript i HTML-taggen din direkte siden HTML ikke skiller mellom store og små bokstaver og nettleseren vil tilordne det til riktig navn for deg. Du kan ikke komme unna med feil bruk av store bokstaver i selve JavaScript-en din, siden JavaScript skiller mellom store og små bokstaver og det ikke finnes noe slikt i JavaScript som onClick.

Denne koden er en enorm forbedring i forhold til tidligere versjoner fordi vi nå både knytter hendelsen til det riktige elementet i HTML-en vår, og vi har JavaScript helt atskilt fra HTML-en. Vi kan forbedre dette enda mer.

Det eneste problemet som gjenstår er at vi bare kan knytte én onclick-hendelsesbehandler til et spesifikt element. Skulle vi på noe tidspunkt måtte knytte en annen onclick-hendelsesbehandler til det samme elementet, vil den tidligere vedlagte behandlingen ikke lenger være knyttet til det elementet. Når du legger til en rekke forskjellige skript til nettsiden din for forskjellige formål, er det i det minste en mulighet for at to eller flere av dem ønsker å gi noen behandling som skal utføres når det samme elementet klikkes på. Den rotete løsningen på dette problemet er å identifisere hvor denne situasjonen oppstår og å kombinere behandlingen som må kalles sammen til en funksjon som utfører hele behandlingen.

Mens sammenstøt som dette er mindre vanlige med onclick enn med onload, er det ikke den ideelle løsningen å måtte identifisere sammenstøtene på forhånd og kombinere dem. Det er ikke en løsning i det hele tatt når selve behandlingen som må festes til elementet endres over tid slik at noen ganger er det en ting å gjøre, noen ganger en annen, og noen ganger begge deler.

Den beste løsningen er å slutte å bruke en hendelsesbehandler helt og i stedet bruke en JavaScript-hendelseslytter (sammen med den tilsvarende attachEvent for Jscript- siden dette er en av de situasjonene der JavaScript og JScript er forskjellige). Vi kan gjøre dette enklest ved først å lage en addEvent-funksjon som vil legge til enten en hendelseslytter eller vedlegg avhengig av hvilken av de to som språket som kjøres støtter;

Vi kan nå legge ved behandlingen som vi ønsker skal skje når elementet vårt klikkes på ved hjelp av:

Å bruke denne metoden for å legge ved koden som skal behandles når et element klikkes på betyr at å gjøre et nytt addEvent-kall for å legge til en annen funksjon som skal kjøres når et spesifikt element klikkes på, vil ikke erstatte den tidligere behandlingen med den nye behandlingen, men vil i stedet tillate begge funksjonene som skal kjøres. Vi trenger ikke å vite når vi kaller en addEvent om vi allerede har en funksjon knyttet til elementet som skal kjøres når det klikkes på, den nye funksjonen kjøres sammen med og funksjoner som tidligere var knyttet.

Skulle vi trenge muligheten til å fjerne funksjoner fra det som kjøres når et element klikkes på, kan vi lage en tilsvarende deleteEvent-funksjon som kaller den aktuelle funksjonen for å fjerne en hendelseslytter eller vedlagt hendelse?

Den ene ulempen med denne siste måten å legge ved behandlingen på er at de virkelig gamle nettleserne ikke støtter disse relativt nye måtene å knytte hendelsesbehandling til en nettside. Det burde være få nok personer som bruker slike foreldede nettlesere nå til å se bort fra dem i det J(ava)Script vi skriver bortsett fra å skrive koden vår på en slik måte at den ikke forårsaker et stort antall feilmeldinger. Funksjonen ovenfor er skrevet slik at den ikke gjør noe hvis ingen av måtene den bruker støttes. De fleste av disse virkelig gamle nettleserne støtter heller ikke getElementById-metoden for å referere til HTML, og det er derfor en enkel if (!document.getElementById) returnerer false; på toppen av noen av funksjonene dine som gjør slike anrop vil også være passende. Selvfølgelig er mange som skriver JavaScript ikke så hensynsfulle til de som fortsatt bruker antikke nettlesere, og derfor må disse brukerne venne seg til å se JavaScript-feil på nesten hver nettside de besøker nå.

Hvilke av disse forskjellige måtene bruker du for å legge ved behandling til siden din som skal kjøres når de besøkende klikker på noe? Hvis måten du gjør det på er nærmere eksemplene øverst på siden enn eksemplene nederst på siden, er det kanskje på tide at du tenker på å forbedre måten du skriver onclick-behandlingen på for å bruke en av de bedre metodene presentert nederst på siden.

Når du ser på koden for hendelseslytteren på tvers av nettlesere, vil du legge merke til at det er en fjerde parameter som vi kalte uC , hvis bruk ikke er åpenbar fra den tidligere beskrivelsen.

Nettlesere har to forskjellige rekkefølger der de kan behandle hendelser når hendelsen utløses. De kan jobbe fra utsiden og innover fra taggen og inn mot taggen som utløste hendelsen, eller de kan jobbe fra innsiden og ut fra den mest spesifikke taggen. Disse to kalles fange og boble og de fleste nettlesere lar deg velge hvilken rekkefølge flere behandlinger skal kjøres i ved å angi denne ekstra parameteren.

• uC = sann til prosess under fangstfasen
• uC = falsk å behandle under boblefasen.

Så der det er flere andre tagger viklet rundt den som hendelsen ble utløst på fangstfasen, starter først med den ytterste taggen og beveger seg inn mot den som utløste hendelsen og så når taggen hendelsen ble knyttet til har blitt behandlet boblefasen reverserer prosessen og går ut igjen.

Internet Explorer og tradisjonelle hendelsesbehandlere behandler alltid boblefasen og aldri fangstfasen, og starter derfor alltid med den mest spesifikke taggen og jobber utover.

Så med hendelsesbehandlere:

ved å klikke på xx ville boble ut og utløse varselet('b') først og varselet('a') etter det.

Hvis disse varslene ble vedlagt ved å bruke hendelseslyttere med uC true, ville alle moderne nettlesere bortsett fra Internet Explorer behandle varselet('a') først og deretter varselet('b').