Javascript og DOM Leksjon 2

Det er også en "insertBefore" DOM-metode som er ganske selvforklarende. Ved å bruke disse to metodene ('insertBefore' & 'appendChild') kan vi lage vår egen 'insertAfter' -funksjon:

 // 'Target' er elementet som allerede finnes i DOM // 'Bullet' er elementet du vil sette inn funksjonsinnleggAfter (mål, punkt) target.nextSibling? target.parentNode.insertBefore (bullet, target.nextSibling): target.parentNode.appendChild (bullet);  // Vi bruker en ternær operatør i funksjonen ovenfor: // Dens format: Betingelse? EXPRESSION IF TRUE: EXPRESSION IF FALSE;

Ovennevnte funksjon kontrollerer at målets neste søsken eksisterer i DOM, hvis den eksisterer, vil den sette inn "bullet" node før målets neste søsken, ellers vil det antas at målet er det siste barn av et element og så Det er greit å legge til kulen som foreldres barn. DOM API gir oss ingen "insertAfter" -metode fordi det ikke er behov for det - vi kan lage det selv.

Det er ganske mye mer å lære om å manipulere elementer i DOM, men ovenstående skal være et tilstrekkelig fundament som du kan bygge på.

arrangementer

Browser hendelser er selve kjernen i en hvilken som helst webapplikasjon og de fleste JavaScript-forbedringer. Det er gjennom disse hendelsene som vi definerer når noe skal skje. Hvis du har en knapp i dokumentet ditt og du trenger noen form validering for å finne sted når den klikkes, vil du bruke klikk-hendelsen. Nedenfor er en oversikt over de fleste vanlige nettleserhendelser:

Merk: Som vi diskuterte forrige gang, er DOM og JavaScript-språket to separate enheter. Nettleserhendelser er en del av DOM API, de er ikke en del av JavaScript.

Mus hendelser

• 'Mousedown' - Mousedown-hendelsen slås av når pekeenheten (vanligvis en mus) trykkes nedover over et element.
• 'Mouseup' - Mouseup-hendelsen blir avbrutt når pekeenheten (vanligvis en mus) slippes over et element.
• 'Klikk' - Klikkhendelsen er definert som en mousedown etterfulgt av en mouseup på nøyaktig samme posisjon.
• 'DblClick' - Denne hendelsen slås av når et element klikkes to ganger i rask rekkefølge i samme posisjon.
• 'mus over' - Mouseover-hendelsen blir avbrutt når pekeenheten beveges over et element.
• 'Mouseout' - Mouseout-hendelsen slås av når pekeenheten er flyttet ut av et element. (vekk fra et element)
• 'Mousemove' - Mousemove-hendelsen blir avbrutt når pekeenheten beveges mens du svinger over et element.

Tastaturhendelser

• 'tastetrykk' - Denne hendelsen slås av når en tast på tastaturet trykkes.
• 'Keydown' - Denne hendelsen brenner også når en tast er trykket, den går før "tastetrykk" -hendelsen.
• 'Keyup' - Denne hendelsen slås av når en nøkkel slippes, etter både "keydown" og "keypress" hendelsene.

Form hendelser

• 'å velge' - Denne hendelsen slås av når tekst i et tekstfelt (input, textarea etc.) er valgt.
• 'endring' - Denne hendelsen blir avbrutt når en kontroll taper inngangsfokuset og / eller verdien er blitt modifisert siden det ble fokusert.
• 'sende inn' - Denne hendelsen slås av når et skjema er sendt inn.
• 'tilbakestille' - Denne hendelsen slås av når et skjema er tilbakestilt.
• 'fokus' - Denne hendelsen slås av når et element mottar fokus, vanligvis fra en pekeenhet.
• 'uklarhet' - Denne hendelsen slås av når et element mister fokus, vanligvis fra en pekeenhet.

Andre hendelser

• 'laste' - Denne hendelsen er avbrutt når brukeragenten fullførte alt innhold i et dokument, inkludert innhold, bilder, rammer og objekter. For elementer, for eksempel "IMG", brenner den når innholdet er ferdig lastet.
• 'Endre størrelse' - Denne hendelsen slås av når dokumentvisningen er endret. (det vil si når nettleseren er endret.)
• 'Bla' - Denne hendelsen slås av når dokumentet rulles.
• 'lesse' - Denne hendelsen slås av når brukeragenten fjerner alt innhold fra et vindu eller en ramme, dvs. når du forlater en side.

Det er mange flere arrangementer å velge mellom. De som er vist ovenfor er de viktigste som du ofte kommer over i JavaScript-koden. Vær oppmerksom på at noen av dem har subtile kryssbrowser-forskjeller. Vær også oppmerksom på at mange nettlesere implementerer proprietære hendelser, for eksempel er det ganske mange Gecko-spesifikke hendelser, for eksempel DOMContentLoaded eller DOMMouseScroll. Du kan lese mer om disse her: https://developer.mozilla.org / no / Gecko-Specific_DOM_Events

Hendelsehåndtering

Vi har dekket de faktiske hendelsene, men vi har ennå ikke diskutert prosessen med å knytte en funksjon til en hendelse. Det er her den magien skjer. Hendelsene som er nevnt ovenfor vil alle forekomme uansett om du har skrevet noen JavaScript, eller ikke, for å utnytte sin kraft må du registrere "hendelseshåndterer". Dette er et fint uttrykk for å beskrive en funksjon som brukes til å håndtere et arrangement. Her er et enkelt eksempel ved hjelp av grunnleggende Hendelsesregistreringsmodell (også kjent som "tradisjonell hendelsesregistrering"):

Grunnleggende hendelsesregistrering:

  Klikk på meg!

 // JavaScript: var myElement = document.getElementById ('min-knappen'); // Denne funksjonen vil være vår hendelsehandler: funksjonsknappKlikk () alert ('Du har bare klikket på knappen!');  // Dette er hendelsesregistreringsdelen: myElement.onclick = buttonClick;

Vi har en HTML-knapp med en ID-kode for "min-knappen", og vi har tilgang til den ved hjelp av kommandoen 'document.getElementById'. Deretter oppretter vi en ny funksjon som senere tildeles til 'onclick' DOM-egenskapen til knappen. Det er alt der er til det!

"Basic event registration" -modellen er så enkel som mulig. Du prefiks hendelsen du er ute etter med "på" og få tilgang til den som en egenskap av det elementet du jobber med. Dette er i hovedsak den ikke-påtrengende versjonen av å gjøre noe slikt (som jeg ikke anbefaler):

 Klikk på meg!

Inline-hendelsesbehandling (ved hjelp av HTML-attributter) er svært påtrengende og gjør nettstedet ditt mye vanskeligere å vedlikeholde. Det er bedre å bruke ikke-påtrengende JavaScript og få alt inkludert i respektive ".js" -filer som kan inkluderes i dokumentet som / når det er nødvendig. Selv om vi er på gjenstanden for diskret JavaScript, vil jeg gjerne rette opp den vanlige misforståelsen at biblioteker som jQuery gjør det mulig å kode diskret. Dette er ikke sant. Når du bruker jQuery, er det like enkelt å gjøre ting på feil måte. Grunnen til at du ikke skal bruke inline hendelseshåndtering, er akkurat det samme som grunnen til at du ikke bør bruke inline CSS-stiler (bruk).

Avansert hendelsesregistrering:

Ikke la dette navnet villede deg, bare fordi det kalles "avansert" betyr ikke at det er bedre å bruke; Faktisk er teknikken vi diskuterte ovenfor ("basic event registration") perfekt egnet mesteparten av tiden. Ved hjelp av den grunnleggende teknikken har man en nøkkelbegrensning skjønt; Du kan ikke binde mer enn en funksjon til en hendelse. Dette er ikke så ille faktisk, fordi du bare kan ringe noen andre funksjoner fra den samme funksjonen, men hvis du trenger mer kontroll, så er det en annen måte å registrere håndtere, skriv inn den "avanserte hendelsesregistreringsmodellen".

Denne modellen lar deg binde flere håndtere til en enkelt hendelse, noe som betyr at flere funksjoner vil løpe når en hendelse oppstår. I tillegg lar denne modellen deg enkelt fjerne noen av de bundet hendelseshåndtererne.

Strengt tatt er det to forskjellige modeller i denne kategorien; W3C og Microsofts. W3C-modellen støttes av alle moderne nettlesere bortsett fra IE, og Microsofts modell støttes bare av IE. Slik bruker du W3C-modellen:

 // FORMAT: target.addEventListener (type, funksjon, useCapture); // Eksempel: var myIntro = document.getElementById ('intro'); myIntro.addEventListener ('klikk', introClick, false);

Og her er det samme, men for IE (Microsofts modell):

 // FORMAT: target.attachEvent ('on' + type, funksjon); // Eksempel: var myIntro = document.getElementById ('intro'); myIntro.attachEvent ('onclick', introClick);

Og her er "introClick" -funksjonen:

 funksjon introClick () alert ('Du klikket på avsnittet!'); 

På grunn av at ingen av modellene fungerer i alle nettlesere, er det en god ide å kombinere dem både i en tilpasset funksjon. Her er en svært grunnleggende 'addEvent' -funksjon, som fungerer på tvers av nettleseren:

 funksjon addEvent (elem, type, fn) if (elem.attachEvent) elem.attachEvent ('on' + type, fn); komme tilbake;  hvis (elem.addEventListener) elem.addEventListener (type, fn, false); 

Funksjonen kontrollerer egenskapene 'attachEvent' og 'addEventListener', og bruker deretter en av modellene avhengig av testen. Begge modellene gjør det mulig å fjerne hendelsesbehandlere også, som vist i denne "removeEvent" -funksjonen:

 funksjon removeEvent (elem, type, fn) if (elem.detachEvent) elem.detachEvent ('on' + type, fn); komme tilbake;  hvis (elem.removeEventListener) elem.removeEventListener (type, fn, false); 

Du vil bruke funksjonene som dette:

 var myIntro = document.getElementById ('intro'); addEvent (myIntro, 'click', function () alert ('DU KLIKKET MEG!'););

Legg merke til at vi bestod en navnløs funksjon som den tredje parameteren. JavaScript lar oss definere og utføre funksjoner uten å navngi dem; Funksjoner av denne typen kalles "anonyme funksjoner" og kan være svært nyttige, spesielt når du må passere en funksjon som en parameter til en annen funksjon. Vi kunne bare sette vår 'introClick' -funksjon (definert tidligere) som den tredje parameteren, men noen ganger er det mer praktisk å gjøre det med en anonym funksjon.

Hvis du vil at en handling skal skje på en hendelse, bare første gang den klikket, kan du gjøre noe slikt:

 // Merk at vi allerede har definert addEvent / removeEvent-funksjonene // (For å bruke dem må de inkluderes) var myIntro = document.getElementById ('intro'); addEvent (myIntro, 'click', oneClickOnly); funksjon oneClickOnly () alert ('WOW!'); removeEvent (myIntro, 'click', oneClickOnly); 

Vi fjerner håndtereren så snart hendelsen blir sparket for første gang. Vi har ikke vært i stand til å bruke en anonym funksjon i eksempelet ovenfor fordi vi behøvde å beholde en referanse til funksjonen ('oneClickOnly') slik at vi senere kunne fjerne den. Når det er sagt, er det faktisk mulig å oppnå med en navngitt (anonym) funksjon:

 addEvent (myIntro, 'klikk', funksjon () alert ('WOW!'); removeEvent (myIntro, 'klikk', arguments.callee););

Vi er ganske frekke her ved å referere til «callee» -egenskapen til «argumenter» -objektet. Argument-objektet inneholder alle bestått parametere for en hvilken som helst funksjon, og inneholder også en referanse til selve funksjonen ('callee'). Ved å gjøre dette eliminerer vi fullstendig behovet for å definere en navngitt funksjon (for eksempel funksjonen "oneClickOnly" tidligere vist).

Bortsett fra de åpenbare syntaktiske forskjellene mellom W3C og Microsofts implementering er det noen andre uoverensstemmelser verdt å merke seg. Når du binder en funksjon til en hendelse, skal funksjonen kjøres innenfor elementets sammenheng, og så "dette" søkeordet i funksjonen bør referere til elementet; ved å bruke enten den grunnleggende hendelsesregistreringsmodellen eller W3Cs avanserte modell, fungerer dette uten feil, men Microsofts implementering mislykkes. Her er et eksempel på hva du bør kunne gjøre innenfor hendelseshåndteringsfunksjoner:

 funksjon myEventHandler () this.style.display = 'none';  // Fungerer riktig, 'dette' refererer til elementet: myIntro.onclick = myEventHandler; // Fungerer riktig, 'dette' refererer til elementet: myIntro.addEventListener ('klikk', myEventHandler, false); // Fungerer IKKE riktig, 'dette' refererer til Window-objektet: myIntro.attachEvent ('onclick', myEventHandler);

Det er noen forskjellige måter å unngå / fikse dette problemet på. Langt det enkleste alternativet er å bruke den grunnleggende modellen - det er nesten ingen kryssbrowser inkonsekvenser når du bruker denne modellen. Hvis du imidlertid vil bruke den avanserte modellen, og du trenger "dette" søkeordet for å referere til elementet riktig, bør du se på noen av de mer utbredte "addEvent" -funksjonene, spesielt John Resig eller Dean Edward (hans gjør ikke ikke engang bruke den avanserte modellen, fantastisk!).

Hendelsesobjektet

Et viktig aspekt av hendelseshåndtering som vi ennå ikke har diskutert, er noe som kalles "Event-objektet". Når du binder en funksjon til en hendelse, det vil si når du oppretter en hendelseshåndterer, vil funksjonen bli bestått en gjenstand. Dette skjer naturlig, slik at du ikke trenger å gjøre noe for å indusere det. Dette hendelsesobjektet inneholder en rekke opplysninger om hendelsen som nettopp har skjedd; den inneholder også kjørbare metoder som har ulike atferdsvirkninger på hendelsen. Men overraskende valgte Microsoft sin egen måte å implementere denne "funksjonen" på; IE-nettlesere overgår ikke dette hendelsesobjektet, i stedet må du få tilgang til det som en egenskap for det globale vinduobjektet; Dette er egentlig ikke et problem, det er bare et uhell:

 funksjon myEventHandler (e) // Merk "e" -argumentet ... // Når denne funksjonen kalles, blir resultatet av objektet passert (i W3C-kompatible agenter) som et resultat av hendelsen // firing. // La oss lage ' e 'cross-browser friendly: e = e || window.event; // Nå kan vi trygt referere 'e' i alle moderne nettlesere.  // Vi ville binde vår funksjon til en hendelse her nede ... 

For å sjekke eksistensen av 'e' -objektet ("Event-objektet") bruker vi en OR (logisk) operatør som i utgangspunktet dikterer følgende: hvis 'e' er en "falsk" verdi (null, udefinert, 0 etc.) og tildel deretter 'window.event' til 'e'; ellers bare bruk 'e'. Dette er en rask og enkel måte å få det virkelige Event-objektet på i et nettleser-miljø. Hvis du ikke er komfortabel med å bruke logiske operatører utenom en IF-setning, kan denne konstruksjonen passe deg mer:

 hvis (! e) e = window.event;  // Ingen ELSE setning er nødvendig som 'e' vil // allerede definert i andre nettlesere

Noen av de mest nyttige kommandoene og egenskapene til dette hendelsesobjektet er dessverre inkonsekvent implementert på tvers av nettlesere (nemlig IE vs alle andre). For eksempel kan du avbryte standardaktiviteten til en hendelse ved å bruke 'preventDefault ()' -metoden til Event-objektet, men i IE kan det bare oppnås ved å bruke egenskapen 'returnValue' til objektet. Så, igjen, må vi bruke begge for å imøtekomme alle nettlesere:

 funksjon myEventHandler (e) e = e || window.event; // Forhindre standard handling av en hendelse: hvis (e.preventDefault) e.preventDefault ();  annet e.returnValue = false; 

Standardaktiviteten til en hendelse er hva som normalt skjer som et resultat av at hendelsen skyter. Når du klikker på en ankerkobling, er standardhandling for nettleseren å navigere til stedet som er angitt i attributet "href" for den linken. Men noen ganger vil du vil deaktivere denne standardhandlingen.

'ReturnValue' / 'preventDefault' irritasjon er ikke alene; Mange andre egenskaper av Event-objektet er inkonsekvent implementert, så dette hvis / else / eller modell for kontroll er en nødvendig oppgave.

Mange av dagens JavaScript-biblioteker normaliserer hendelsesobjektet, noe som betyr at kommandoer som "e.preventDefault" vil være tilgjengelige i IE, selv om du bør merke seg at bak kulissene er "returnValue" -egenskapen fortsatt utnyttet.

Event boblende

Event bobling, også kjent som "event propagation", er når en hendelse blir sparket og så hendelsen "bobler" opp gjennom DOM. Det første å merke seg er at ikke alle hendelser bobler, men for de som gjør det, her er hvordan det fungerer:

Hendelsen brenner på målelementet. Arrangementet brenner deretter på hver forfader av det elementet - hendelsen bobler opp gjennom DOM til den når det øverste elementet:

Som vist i grafikken ovenfor, hvis et anker i et avsnitt klikkes, vil ankerens klikkhendelse brenne først, og etter det vil stykkens klikkhendelse skje etc. til kroppselementet er nådd (kroppen er det høyeste DOM-elementet som har en klikkhendelse).

Disse hendelsene vil brann i den rekkefølgen, de kommer ikke alle sammen på samme tid.

Ideen om boblende hendelser kan ikke gi stor mening først, men til slutt blir det klart at det er en grunnleggende del av det vi anser som "normal oppførsel". Når du binder en handler til klikkhendelsen i avsnittet, forventer du at det skal brennes når avsnittet klikkes, ikke sant? Vel, det er akkurat hva "event boblende" sikrer - hvis avsnittet har flere barn, ((s, s, s) så selv når de klikkes på hendelsen vil boble opp til avsnittet.

 funksjon myParagraphEventHandler (e) e = e || window.event; // Stopp hendelsen fra å boble opp: hvis (e.stopPropagation) // W3C-kompatible nettlesere: e.stopPropagation ();  else // IE: e.cancelBubble = true;  // Funksjonen vil være bundet til klikkhendelsen i avsnittet: // Bruke vår skreddersydde addEvent-funksjon: addEvent (document.getElementsByTagName ('p') [0], 'klikk', myParagraphEventHandler);

 var myTable = document.getElementById ('my-table'); myTable.onclick = function () // Håndtering av nettleserens uforlikeligheter: e = e || window.event; var targetNode = e.target || e.srcElement; // Test om det var en TR som ble klikket: hvis (targetNode.nodeName.toLowerCase () === 'tr') alert ('Du klikket en tabellrad!');