Apèsi sou lekòl la: Nan atik sa a nou pral diskite sou sou evènman yo navigatè nan JavaScript. Java evènman script yo trè enpòtan menm jan yo fè pi fò nan travay yo. lòt pwen ki enpòtan se konpatibilite a navigatè. Kòm se script la java entegre nan dosye html, ekzekisyon an nan script java se navigatè depann. Scripts Java yo tou gen ase matirite ase okipe evènman navigatè.
Entwodiksyon:
Yon evènman navigatè se yon siyal soti nan navigatè a nan aplikasyon an nan ka se yon aksyon fèt. Evènman sa yo yo se nan kalite sa yo
- Dom Evènman: Sa yo inisye pa eleman yo Dom e.g. se yon evènman klike sou deklanche lè se yon eleman klike oswa se yon sourit sou evènman deklanche lè se konsèy la sourit plane sou yon eleman. Evènman sa yo konekte yon kòd java script ak dokiman an.
- Fenèt Evènman: Sa yo inisye lè se fenèt navigatè a rdimansyone.
Ki sa ki evènman yo?
ka Yon evènman dwe defini kòm yon aksyon / travay ki voye yon siyal nan script java. Koulye a, java script ègzekutra an repons a kèk evènman. Men, ta dwe evènman an dwe anrejistre yo voye siyal nan eleman nan respektif java script. Apre yo se kèk nan evènman yo.
evènman Fenèt: Evenman sa yo inisye lè se fenèt navigatè rdimansyone.
Dom evènman: Sa yo inisye lè yon eleman Dom ap pèfòme kèk aksyon.
Lòt evènman: Evenman sa yo konsidere tout lòt kalite evènman apa de de ki pi wo a.
pòtè evènman: Nou bezwen konprann ke gen yon gwo diferans ant java ak java script. Nan Java, milti anfile se posib men evènman java script se yon selibatè Threaded. Se konsa, pòtè yo evènman yo egzekite sekans. Pou klarifye li, se pou nou asime te yon sèl itilizatè fèt de evènman, mouzove ak Lè sa a mousemove. Se konsa, pral evènman an mouzove dwe egzekite premye. Yon fwa evènman an premye se konplè, mousemove evènman pral jwenn egzekite.
Si yon script gen fè yon aksyon kont yon evènman, li ta dwe gen yon fonksyon ki asosye nan li. Fonksyon sa yo yo refere kòm pòtè evènman. Anjeneral fonksyon sa yo yo te rele nan fòma an - sou EVENT_NAME e.g. onclick elatriye. pòtè Evènman nan script java se yon selibatè Threaded ak yo egzekite sekans. Pakonsekan si de evènman rive nan menm tan an, pòtè yo pral egzekite youn apre lòt. Gen anpil fason nan ki pòtè yo evènman yo asiyen. These are.
Lè l sèvi avèk tag HTML: ka kap okipe-a evènman dwe asosye dirèkteman nan nan markeup a ap itilize atribi sou evènman.
Listing 1: Event handler using html tag
[Code]
<id opinyon = “b1” valè = “Klike sou m '” onclick = “alèt('Mèsi! Mwen klike. ‘); ” kalite = “bouton” />
[/Code]
Lè yo kòd sa a egzekite, nou wè yon bouton ak yon etikèt sou – 'Klike sou m' '. Si itilizatè a frape bouton sa-a yon fenèt alèt ak yon mesaj – Mèsi! Mwen klike. Nou kapab tou rele yon fonksyon pou manyen evènman. Konsidere Kòd ki anba la a
Listing 2: kap okipe-evènman lè l sèvi avèk fonksyon
[Code]
| <!Doktip HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <tèt> | |||||||||||||||
| <script kalite =”tèks / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| pou(var mwen = 1; mwen <= 3; mwen ) { | |||||||||||||||
| alèt( “lapen “+mwen ” soti nan chapo an!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </tèt> | |||||||||||||||
| <kò> | |||||||||||||||
| <D 'kalite = “bouton” onclick = “count_rabbits()” valè = “Konte lapen!”/> | |||||||||||||||
| </kò> | |||||||||||||||
| </html>[/Code]Yon lòt apwòch nan mare evènman an ap itilize ap itilize this.innerHTML kote sa a refere a eleman aktyèl la. Kòd ki anba la a montre sa aListing 3: kap okipe-evènman lè l sèvi avèk this.innerHTML
[Code] <bouton onclick = “alèt ( this.innerHTML )”> Klike sou m 'wè m' </bouton> [/Code] Lè l sèvi avèk Dom objè Pwopriyete: Isit la se plasman an te fè lè l sèvi avèk pwopriyete a – onevent. Nan ka sa a nou bezwen jwenn eleman nan premye ak Lè sa a bay yon kap okipe-onevent a pwopriyete. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: kap okipe-evènman lè l sèvi avèk Dom objè Pwopriyete [Code] <id opinyon = “myId” kalite = “bouton” valè = “peze m '”/> <script> document.getElementById( ‘ myId ‘ ).onclick = fonksyon() { alèt('Mèsi') } </script> [/Code] Isit la de bagay sa yo dwe te note yo nan lòd yo sèvi ak sa a – · It is a property, pa yon atribi ak non li se onevent ki se ka sansib epi yo ta dwe nan pi ba ka. · The handler should be a function not a String. Lè navigatè a jwenn yon atribi onevent nan markeup la HTML, li kreye yon fonksyon lè l sèvi avèk sa li yo ak asiyen li nan pwopriyete a. Se konsa, de kòd sa yo ki fè menm bagay la Listing 5: kap okipe-evènman l sèvi avèk sèlman HTML [Code] <D 'kalite = “bouton” onclick = “alèt( 'Klike sou!’ )” valè = “bouton”/> [/Code] Listing 6: kap okipe-evènman lè l sèvi avèk HTML & JS. [Code] <D 'kalite = “bouton” didantite = “bouton” valè = “bouton”/> <script> document.getElementById('Bouton').onclick = fonksyon() { alèt('Klike sou!’) } </script> [/Code] JavaScript ranplas yon kap okipe-mete nan markeup. brib ki anba la a ranplase yon kap okipe-markeup ak yon sèl nouvo Listing 7: Ranplasan yon seri kap okipe. <D 'kalite =”bouton” onclick =”alèt('Anvan')” value=”peze m '”/> <script> document.getElementsByTagName('D' ')[0].onclick = fonksyon() { alèt('Apre') } </script> [/Code] Lè l sèvi avèk metòd espesyal: Nan yon aplikasyon konplèks JavaScript, kote metòd koòdone diferan okipe metòd koutim evènman komen yo te itilize yo asiyen pòtè. Microsoft bay yon solisyon ki te sèlman travay ak IE vèsyon mwens pase 9 epi tou ak Opera. Manutansyonèr yo asiyen ak detache kòm anba Listing 8: Mete epi yo retire pòtè element.attachEvent( “sou” + evènman, kap okipe) [/Code] Retire yon Handler – [Code] element.detachEvent( “sou” + evènman, kap okipe) [/Code] Lè l sèvi avèk tache evènman, nou ka bay pòtè miltip yo eleman nan menm. Kòd brib sa a montre sa a Listing 9: Plase pòtè miltip nan yon sèl eleman. [Code] <id opinyon = “myElement” kalite = “bouton” valè = “peze m '” /> <script> var myElement = document.getElementById( “myElement” ) te aji = fonksyon() { alèt( 'Mèsi!’ ) } te echanj 2. = fonksyon() { alèt( 'Mesi anko!’ ) } myElement.attachEvent( “onclick”, kap okipe) myElement.attachEvent( “onclick”, handler2) </script> [/Code] Tache pa evènman ki pase paramèt nan 'sa a'. Tankou pou chak estanda a W3C kap okipe plasman ki anba la a ap travay nan prèske tout navigatè ke yo te itilize jodi a. Mete yon Handler Listing 10: Mete epi yo retire pòtè tankou pou chak W3C element.addEventListener ( evènman, kap okipe, faz ) [/Code] eleman. removeEventListener ( evènman, kap okipe, faz ) [/Code]
Evènman ki gen rapò aksyon: Nou ta dwe pran swen nan kat aksyon sa yo pandan y ap manyen aksyon evènman ki gen rapò · Enskri kap okipe-a evènman: Sa a ka fè pa mete eleman sa yo pou pwopriyete onevent e.g. onclick oswa onkeypress elatriye. Sa a ap travay ak navigatè a tout antye, men li gen yon limitasyon ke nou ka tache youn sèlman kap okipe-evènman nan yon eleman. Evènman yo tache ka retire nan yon tan menm jan lè l sèvi avèk detachEvent oswa removeEventListener. · Jwenn objè a evènman: Majorite nan navigatè pase objè a evènman kòm yon agiman kap okipe-a. yo twa Evènman yo yo jenere lè itilizatè a klik sourit l '. o Mousedown: endike ke se sourit la bourade. o Mouseup: endike ke se sourit la lage. o Klike sou: endike ke se sourit la klike. Si sa rive nan siksesyon, sa a endike ke li te yon doub klike rive. · Extract information from the object – Twazyèm etap la se aksyon ekstrè enfòmasyon ki gen rapò soti nan objè a ak kòmanse aksyon an. · Inform about the completion of the event – Sa a se etap final la. Yon fwa yo evènman an launcher avèk siksè se fini an nan evènman an make. Summary: Pou nou fini diskisyon an nou ka kenbe pwen sa yo nan tèt ou · Used to initiate an action which should be performed as per the customers need. · Events are of two types – Dom evènman ak evènman Fenèt. · 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
