Oversigt: I denne artikel vil vi diskutere om browseren begivenheder i JavaScript. Java script begivenheder er meget vigtigt, da de udfører de fleste af de opgaver,. Det andet vigtige punkt er den browser kompatibilitet. Som java script er indlejret i html-filer, udførelsen af java script er browser afhængig. Java scripts er også modnet nok til at håndtere browser begivenheder.
Indledning:
En browser begivenhed er et signal fra browseren til ansøgningen, hvis en handling er udført. Disse begivenheder er af følgende typer
- DOM Begivenheder: Disse er indledt af DOM elementer f.eks. et klik begivenhed udløses, når et element der klikkes eller musen over begivenhed udløses, når musemarkøren er svævede på et element. Disse begivenheder tilslutte en java script kode med dokumentet.
- vindue Begivenheder: Disse er indledt, når browservinduet er ændret størrelse.
Hvad er de begivenheder?
En hændelse kan defineres som en handling / arbejde, der sender et signal til java script. Nu java script henretter som reaktion på nogle begivenhed. Men begivenheden skal registreres til at sende signal til den respektive java script komponent. Følgende er nogle af de begivenheder.
Window begivenheder: Disse begivenheder er påbegyndt, når browservinduet er ændret størrelse.
DOM events: Disse startes, når en DOM element udfører en handling.
Andre begivenheder: Disse begivenheder overvejer alle andre former for arrangementer, bortset fra de to ovennævnte.
hændelseshandlere: Vi er nødt til at forstå, at der er en stor forskel mellem java og java script. I java, multi threading er mulig, men java script begivenheder er enkelt gevind. Så hændelseshandlere udføres sekventielt. For at tydeliggøre det, lad os antage én bruger har udført to begivenheder, mouseover og derefter mouseMove. Så mouseover begivenhed vil blive henrettet først. Når den første begivenhed er afsluttet, mouseMove begivenhed vil blive henrettet.
Hvis et script har til at udføre en sag mod en begivenhed, det bør have en funktion i forbindelse med det. Disse funktioner er nævnt som hændelseshandlere. Normalt disse funktioner er navngivet i formatet - på EVENT_NAME f.eks. onclick etc. Hændelseshandlere i java script er enkelt gevind og er gennemført i rækkefølge. Derfor, hvis to hændelser forekommer samtidigt, deres handlere vil blive henrettet den ene efter anden. Der er mange måder, hvorpå hændelseshandlere er tildelt. These are.
Brug HTML-tag: Arrangementet handleren kan være forbundet direkte ind på markup hjælp attribut på-hændelse.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” value = “Klik mig” onclick = “alert('Tak! Jeg klikkede. ‘); ” type = “knap” />
[/Code]
Når denne kode udføres, vi se en knap med en etiket – 'Klik mig ". Hvis brugeren rammer denne knap en advarsel vindue med en meddelelse – Thanks! Jeg klikkede. Vi kan også kalde en funktion til begivenhed håndtering. Overvej følgende kode
Listing 2: Begivenhed handleren bruger funktion
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <hoved> | |||||||||||||||
| <script type =”tekst / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| for(var i = 1; Jeg <= 3; i ) { | |||||||||||||||
| alert( “Kanin “+i ” ud af hatten!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </hoved> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “knap” onclick = “count_rabbits()” value = “Tæl kaniner!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]En anden tilgang til at binde begivenheden bruger this.innerHTML hvor dette henviser til det aktuelle element. Følgende kode illustrerer detteListing 3: Begivenhed handleren bruger this.innerHTML
[Code] <knap onclick = “alert ( this.innerHTML )”> Klik mig at se mig </knap> [/Code] Brug DOM Object Ejendom: Her opgaven er lavet ved hjælp ejendommen – onevent. I dette tilfælde har vi brug for at få elementet først og derefter tildele en handler til ejendommen onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Begivenhed handleren bruger DOM Object Ejendom [Code] <input id = “mittid” type = “knap” value = “tryk mig”/> <script> document.getElementById( ‘ mittid ‘ ).onclick = funktion() { alert('Tak') } </script> [/Code] Her følgende to ting skal bemærkes, for at kunne bruge denne – · It is a property, ikke en attribut, og dens navn er onevent som små bogstaver og skal være med små bogstaver. · The handler should be a function not a String. Når browseren finder en onevent attribut i HTML markup, det skaber en funktion ved hjælp dets indhold og tildeler den til ejendommen. Så de følgende to koder gør det samme Listing 5: Event handler kun bruger HTML [Code] <input type = “knap” onclick = “alert( 'Klik!’ )” value = “Knap”/> [/Code] Listing 6: Begivenhed handleren ved hjælp af HTML & JS. [Code] <input type = “knap” id = “knap” value = “Knap”/> <script> document.getElementById('knap').onclick = funktion() { alert('Klik!’) } </script> [/Code] JavaScript overskriver en handler sat i markup. Følgende kodestump erstatter en markup handler med en ny Listing 7: Overskrivning en handler sæt. <input type =”knap” onclick =”alert('Før')” value=”tryk mig”/> <script> document.getElementsByTagName("Input")[0].onclick = funktion() { alert('Efter') } </script> [/Code] Anvende særlige metoder: I en kompleks JavaScript ansøgning, hvor forskellige interface metoder håndtere fælles event brugerdefinerede metoder anvendes til at tildele handlere. Microsoft leverer en løsning, der kun fungerer med IE-version er mindre end 9 og også med Opera. Førere tildeles og fritliggende som under Listing 8: Montering og afmontering handlere element.attachEvent( “på” + tilfælde, handleren) [/Code] Fjernelse af en Handler – [Code] element.detachEvent( “på” + tilfælde, handleren) [/Code] Brug vedhæfte begivenhed, vi kan tildele flere handlere til samme element. Følgende kodestykke viser dette Listing 9: Tildeling af flere handlere til et element. [Code] <input id = “myElement” type = “knap” value = “tryk mig” /> <script> var myElement = document.getElementById( “myElement” ) var handler = function() { alert( 'Tak!’ ) } var handler2 = function() { alert( 'Tak igen!’ ) } myElement.attachEvent( “onclick”, handleren) myElement.attachEvent( “onclick”, handler2) </script> [/Code] Vedhæft begivenheder ikke passerer parameteren "dette". Som pr W3C standard følgende handler opgaven fungerer i næsten alle browsere, der bruges i dag. Montering af et Handler Listing 10: Montering og afmontering håndterer som pr W3C element.addEventListener ( tilfælde, handleren, fase ) [/Code] element. removeEventListener ( tilfælde, handleren, fase ) [/Code]
Møde- og relaterede handlinger: Vi bør tage sig af de følgende fire aktioner, mens håndtering event relaterede handlinger · Registrer hændelseshandler: Dette kan gøres ved at indstille elementerne onevent ejendommen fx. onclick eller onkeypress etc. Dette virker med hele browseren, men har en begrænsning, at vi kan vedhæfte kun én event handler til et element. De vedhæftede begivenheder kan fjernes på en lignende måde under anvendelse detachEvent eller removeEventListener. · Få objektet begivenhed: Flertal af browsere passere objektet begivenhed som et argument til føreren. De følgende tre hændelser genereres, når brugeren klikker hans mus. o mouseDown: angiver, at der trykkes på musen. o mouseUp: angiver, at musen er frigivet. o Klik: angiver, at musen er klikket. Hvis dette sker i rækkefølge, Dette indikerer, at et dobbeltklik sket. · Extract information from the object – Det tredje skridt er ekstraktet handling information fra objektet og indlede handling. · Inform about the completion of the event – Dette er det sidste trin. Når begivenheden auktioneres held færdiggørelsen af begivenheden er markeret. Summary: Som afslutning på diskussionen vi kan holde følgende punkter i tankerne · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM begivenheder og Window events. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Java Script Design Patterns
CSS3 & JavaScript
Java Script and CSS3 properties
