Yfirlit: Í þessari grein munum við fjalla um atburði bókamerki í JavaScript. Java handrit atburðir eru mjög mikilvæg og þeir framkvæma flest verkefni. Önnur mikilvæg atriði er vafrinn eindrægni. Eins og Java handrit er fellt í HTML skrár, framkvæmd Java Script vafri háð. Java forrit eru einnig þroskast nóg til að höndla atburði vafranum.
Inngangur:
A vafra atburður er merki frá vafranum til umsóknar ef aðgerð er framkvæmd. Þessir viðburðir eru eftirfarandi gerðum
- DOM Viðburðir: Þetta eru hafin af DOM þætti t.d.. smellur atburður er kölluð þegar þátturinn er smellt eða mús yfir atburði er kölluð þegar músarbendillinn er sveima á frumefni. Þessir atburðir tengja Java handrit kóðann með skjalinu.
- Gluggi Viðburðir: Þetta eru hafin þegar glugga er breytt.
Hvað eru atburðir?
Viðburður getur verið skilgreind sem aðgerð / vinnu sem sendir merki til Java handrit. Nú keyrir Java handrit til að bregðast við einhverju atburð. En atburður ætti að vera skráð til að senda merki til viðkomandi Java handrit efnisþáttar. Eftirfarandi eru nokkrar af þeim atburðum.
Gluggi viðburðir: Þessir viðburðir eru hafin þegar vafraglugga er breytt.
DOM viðburðir: Þetta eru hafin þegar DOM þáttur er að skila til aðgerða.
Aðrir atburðir: Þessir atburðir eru að íhuga allar aðrar gerðir af atburðum í sundur frá ofangreindum tveimur.
atburður dýraþjálfari: Við þurfum að skilja að það er stór munur á milli Java og Java handrit. Í Java, multi þráður er hægt en Java Script viðburðir eru einn Threaded. Svo atburður dýraþjálfari eru keyrð í röð. Til að skýra það, Við skulum gera ráð fyrir einn notandi hefur leikið tvo atburði, mouseover og þá mousemove. Svo mouseover atburður verður framkvæmt fyrst. Þegar fyrsti viðburður er lokið, mousemove atburður vilja fá fram.
Ef handrit er til að framkvæma aðgerð gegn atburði, það ætti að hafa virka tengslum við það. Þessar aðgerðir eru nefnd sem dýraþjálfari atburður. Venjulega þessar aðgerðir eru nefnd í formi - á EVENT_NAME t.d. onClick etc. Atburður dýraþjálfari í Java handrit eru einn Threaded og eru keyrð í röð. Því ef tveir atburðir eiga sér stað á sama tíma, meðhöndlun þeirra verður keyrð hvert á eftir öðru. There ert margir lifnaðarhættir þar sem atburður dýraþjálfari eru tengd. These are.
Using HTML tag: The atburður dýraþjálfari geta tengst beint inn á Markup nota eigindi á-atburður.
Listing 1: Event handler using html tag
[Code]
<inntak id = “b1” gildi = “Smelltu mig” onclick = “viðvörun("Takk! Ég smellti. ‘); ” type = “button” />
[/Code]
Þegar þetta númer er keyrð, sjáum við hnapp með merki – 'Smelltu mig'. Ef notandinn slær á þennan hnapp viðvörun glugga með skilaboðum – Takk! Ég smellti. Við getum líka hringt í virka fyrir meðhöndlun atburður. Lítum á eftirfarandi kóða
Listing 2: Atburður dýraþjálfari með virka
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <HTML> | |||||||||||||||
| <höfuð> | |||||||||||||||
| <handrit type =”texti / JavaScript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| fyrir(Var i = 1; ég <= 3; ég ) { | |||||||||||||||
| viðvörun( “Rabbit “+i ” úr hattinum!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </handrit> | |||||||||||||||
| </höfuð> | |||||||||||||||
| <líkami> | |||||||||||||||
| <input type = “button” onclick = “count_rabbits()” gildi = “telja kanínur!”/> | |||||||||||||||
| </líkami> | |||||||||||||||
| </HTML>[/Code]Önnur aðferð til að binda atburði er að nota this.innerHTML þar er átt við núverandi frumefni. Eftirfarandi númer sýnir þettaListing 3: Atburður dýraþjálfari með this.innerHTML
[Code] <hnappinn onclick = “viðvörun ( this.innerHTML )”> Smelltu mig að sjá mig </button> [/Code] Using DOM hlut eign: Hér verkefnið er gert með því að nota eign – onevent. Í þessu tilfelli, þurfum við að fá þáttur fyrst og síðan úthluta sýnandi að eign onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Atburður dýraþjálfari með DOM hlut eign [Code] <inntak id = “myId” type = “button” gildi = “ýta mér”/> <handrit> document.getElementById( ‘ myId ‘ ).onclick = fall() { viðvörun('Takk') } </handrit> [/Code] Hér eftirfarandi tvö atriði skal fram í því skyni að nota þetta – · It is a property, ekki eiginleiki og nafn þess er onevent sem er tilfelli næmur og ætti að vera í lágstöfum. · The handler should be a function not a String. Þegar vafrinn finnur onevent eiginleiki í HTML Markup, það skapar aðgerð með innihald hennar og gefur henni að eign. Svo eftirfarandi tveimur númerum gerir það sama Listing 5: Atburður dýraþjálfari nota aðeins HTML [Code] <input type = “button” onclick = “viðvörun( 'Smellur!’ )” gildi = “Button”/> [/Code] Listing 6: Atburður dýraþjálfari að nota HTML & JS. [Code] <input type = “button” id = “button” gildi = “Button”/> <handrit> document.getElementById('Hnappinn').onclick = fall() { viðvörun('Smellur!’) } </handrit> [/Code] JavaScript birtist á dýraþjálfari sett í sniði. Eftirfarandi bútur stað umbrotsmál dýraþjálfari með nýjan Listing 7: Skrifa of a dýraþjálfari sett. <input type =”button” onclick =”viðvörun('Áður')” value=”ýta mér”/> <handrit> document.getElementsByTagName('Inntak')[0].onclick = fall() { viðvörun("Eftir ') } </handrit> [/Code] Nota sérstakar aðferðir: Í flóknu JavaScript umsókn, þar sem mismunandi aðferðir tengi höndla sameiginlegur atburður sérsniðin aðferðir eru notaðar til að meta vöruna. Microsoft veitir lausn sem virkar aðeins með IE útgáfu minna en 9 og einnig með Opera. Dýraþjálfari er úthlutað og aðskilinn sem undir Listing 8: Festa og fjarlægja vöruna element.attachEvent( “á” + atburður, dýraþjálfari) [/Code] Fjarlægja Handler – [Code] element.detachEvent( “á” + atburður, dýraþjálfari) [/Code] Using hengja atburð, Við getum framselja margar vöruna á sama frumefnis. Eftirfarandi númer runu sýnir þetta Listing 9: Úthlutun margar vöruna til einn þáttur. [Code] <inntak id = “myElement” type = “button” gildi = “ýta mér” /> <handrit> Var myElement = document.getElementById( “myElement” ) var vinna = fall() { viðvörun( "Takk!’ ) } voru viðskipti 2. = fall() { viðvörun( 'Takk aftur!’ ) } myElement.attachEvent( “onClick”, dýraþjálfari) myElement.attachEvent( “onClick”, handler2) </handrit> [/Code] Hengja viðburði stenst ekki breytu 'þetta'. Eins og á W3C staðli eftirfarandi stjórnandinn verkefni vinnur í næstum öllum vöfrum sem eru notaðar í dag. Festa Handler Listing 10: Festa og fjarlægja vöruna eins og á W3C element.addEventListener ( atburður, dýraþjálfari, áfanga ) [/Code] þáttur. removeEventListener ( atburður, dýraþjálfari, áfanga ) [/Code]
Event tengjast aðgerðir: Við ættum að gæta af eftirfarandi fjórum aðgerðum á meðan meðhöndlun atburði sem tengjast aðgerðum · Skrá atburð dýraþjálfari: Þetta er hægt að gera með því að setja þá þætti onevent eign t.d.. onClick eða onkeypress etc. Þetta virkar með öllu vafranum en hefur takmörkun sem við getum hengja aðeins einn atburð dýraþjálfari að stak. Meðfylgjandi atburðir hægt að fjarlægja á svipaðan hátt með detachEvent eða removeEventListener. · Fá atburður hlut: Meirihluti vafra standast atburður hlut sem rök að stjórnandinn. Eftirfarandi þrjár atburðir eru búnir þegar notandi smellir músina sína. o Mousedown: gefur til kynna að músin er ýtt. o Mouseup: gefur til kynna að músin er sleppt. o Smellur: gefur til kynna að músin er smellt. Ef þetta gerist í röð, þetta sýnir að tvísmella hefur gerst. · Extract information from the object – Þriðja skrefið er útdrátturinn aðgerð tengdar upplýsingar frá hlutnum og hefja aðgerðir. · Inform about the completion of the event – Þetta er lokaskrefið. Þegar atburður er boðin tekist að hinum atburður er merkt. Summary: Að ljúka umræðu að við getum haldið eftirfarandi atriði í huga · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM atburðir og glugga viðburðir. · 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
