Përmbledhje: Në këtë artikull ne do të diskutojnë në lidhje me ngjarjet e shfletuesit në JavaScript. Ngjarjet java script janë shumë të rëndësishme si ato të kryejnë shumicën e detyrave. Pika tjetër e rëndësishme është compatibility shfletuesit. Si script java është e ngulitur në fotografi html, ekzekutimi i shkrimit java është shfletuesi i varur. Java Scripts janë pjekur edhe të mjaftueshme për të trajtuar ngjarjet shfletuesit.
Parathënie:
Një ngjarje shfletues është një sinjal nga shfletuesi me zbatimin nëse është kryer një veprim. Këto ngjarje janë të llojeve të mëposhtme
- DOM Events: Këto janë iniciuar nga elementet DOM e.g. një ngjarje click është shkaktuar kur një element është i klikuar, ose një mouse mbi ngjarje është shkaktuar kur treguesin e miut është fluturoi në një element. Këto ngjarje të lidhë një kod java script me dokumentin.
- Dritare Events: Këto janë iniciuar kur dritarja shfletuesi është ridimensionuar.
Cilat janë ngjarjet?
Një ngjarje mund të përkufizohet si një veprim / punë që dërgon një sinjal të shkrimit java. Tani java script ekzekuton në përgjigje të disa ngjarje. Por ngjarja duhet të jetë i regjistruar për të dërguar sinjal të komponentit përkatës java script. Në vijim janë disa nga ngjarjet.
ngjarjet Window: Këto ngjarje janë nisur kur dritarja e shfletuesit është ridimensionuar.
ngjarjet DOM: Këto janë nisur kur një element DOM është duke kryer disa veprime.
ngjarje të tjera: Këto ngjarje janë marrë parasysh të gjitha llojet e tjera të ngjarjeve përveç dy më sipër.
Event handlers: Ne duhet të kuptojmë se ka një dallim të madh mes java dhe java script. Në java, multi fillesë është e mundur, por ngjarje java script janë vetëm ndërprerë. Pra, handlers ngjarje janë ekzekutuar sekuenciale. Për të sqaruar atë, le të supozojmë një përdorues ka kryer dy ngjarje, Kalo miun kompjuterik mbi dhe pastaj MouseMove. Pra ngjarja Kalo miun kompjuterik mbi do të ekzekutohet për herë të parë. Pasi ngjarja e parë është e plotë, Ngjarja MouseMove do të ekzekutohet.
Në qoftë se një script duhet të kryejë një veprim kundër një ngjarje, ajo duhet të ketë një funksion të lidhur me të. Këto funksione janë të referuara si handlers ngjarje. Zakonisht këto funksione janë emëruar në formatin - on EVENT_NAME e.g. onClick etj. Trajtuesit e ngjarjeve në shkrimin java janë vetëm ndërprerë dhe janë ekzekutuar sekuenciale. Kështu që nëse dy ngjarje ndodhin njëkohësisht, handlers e tyre do të ekzekutohet një pas tjetrit. Ka shumë mënyra në të cilat handlers ngjarje janë caktuar. These are.
Duke përdorur tag HTML: Ngjarja mbajtës mund të jetë i lidhur direkt me markup duke përdorur atribut në-ngjarje.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” vlera = “Kliko mua” onClick = “vigjilent('Faleminderit! Unë jam duke klikuar. ‘); ” type = “buton” />
[/Code]
Kur ky kod është ekzekutuar, ne shohim një buton me një etiketë – "Kliko mua '. Nëse shfrytëzuesi godet këtë buton një dritare alarm me një mesazh – Falënderim! Unë jam duke klikuar. Ne gjithashtu mund të telefononi një funksion për trajtimin e ngjarjes. Konsideroni kodin e mëposhtëm
Listing 2: mbajtës ngjarje duke përdorur funksionin
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <kokë> | |||||||||||||||
| <Lloji script =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| për(var i = 1; unë <= 3; i ) { | |||||||||||||||
| vigjilent( “lepur “+i ” nga hat!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </kokë> | |||||||||||||||
| <body> | |||||||||||||||
| <lloj input = “buton” onClick = “count_rabbits()” vlera = “Numërimi lepujt!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Një tjetër mënyrë për të lidh ngjarjen është duke përdorur this.innerHTML kur kjo ka të bëjë me elementin e tanishme. Kodi mëposhtme ilustron këtëListing 3: mbajtës Event përdorur this.innerHTML
[Code] <button onClick = “vigjilent ( this.innerHTML )”> Kliko mua për të parë më </buton> [/Code] Duke përdorur DOM Object Pronës: Këtu detyra është bërë duke përdorur pronën – onevent. Në këtë rast ne kemi nevojë për të marrë elementin e parë dhe pastaj të caktojë një mbajtës të onevent pronës. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: mbajtës ngjarje duke përdorur DOM Object Pronës [Code] <input id = “myId” type = “buton” vlera = “shtypni mua”/> <script> document.getElementById( ‘ myId ‘ ).onClick = Funksioni() { vigjilent('Faleminderit') } </script> [/Code] Këtu dy gjëra e mëposhtme duhet të shënohet në mënyrë që të përdorin këtë – · It is a property, Nuk atribut dhe emri i tij është onevent e cila është rasti të ndjeshme dhe duhet të jetë në rastin më të ulët. · The handler should be a function not a String. Kur shfletuesi gjen një atribut onevent në Markup HTML, ajo krijon një funksion të përdorur përmbajtjen e tij dhe cakton atë në pronë. Pra, të dy kodet e mëposhtme bën të njëjtën gjë Listing 5: mbajtës ngjarje duke përdorur vetëm HTML [Code] <lloj input = “buton” onClick = “vigjilent( 'Kliko!’ )” vlera = “buton”/> [/Code] Listing 6: mbajtës ngjarje duke përdorur HTML & JS. [Code] <lloj input = “buton” id = “buton” vlera = “buton”/> <script> document.getElementById('Button').onClick = Funksioni() { vigjilent('Kliko!’) } </script> [/Code] JavaScript overwrites një mbajtës të vendosur në markup. Copëza pas zëvendëson një mbajtës Markup me një të re Listing 7: Overwriting një grup mbajtës. <lloj input =”buton” onClick =”vigjilent('Para')” value=”shtypni mua”/> <script> document.getElementsByTagName('Input')[0].onClick = Funksioni() { vigjilent("Pas ') } </script> [/Code] Duke përdorur metoda speciale: Në një aplikim kompleks JavaScript, ku metoda të ndryshme ndërfaqe të trajtuar metodat porosi të përbashkët ngjarje janë përdorur për të caktuar handlers. Microsoft ofron një zgjidhje e cila punon vetëm me versionin IE më pak se 9 dhe gjithashtu me Opera. Handlers janë caktuar dhe të shkëputur si në Listing 8: Bashkëngjitur dhe largimin e handlers element.attachEvent( “në” + ngjarje, mbajtës) [/Code] Heqja e një Handler – [Code] element.detachEvent( “në” + ngjarje, mbajtës) [/Code] Përdorimi bashkëngjitni ngjarje, ne mund të caktojë handlers të shumta për të njëjtin element. Kodi copë Në vijim tregon këtë Listing 9: Caktimi handlers të shumta në një element. [Code] <input id = “myElement” type = “buton” vlera = “shtypni mua” /> <script> var myElement = document.getElementById( “myElement” ) ishte duke vepruar = Funksioni() { vigjilent( 'Faleminderit!’ ) } ishin tregton 2. = Funksioni() { vigjilent( 'Faleminderit perseri!’ ) } myElement.attachEvent( “onClick”, mbajtës) myElement.attachEvent( “onClick”, handler2) </script> [/Code] Bashkangjit ngjarjet nuk kalojnë parametër 'këtë'. Sipas standardit W3C mbajtës caktimi pas punon në pothuajse të gjithë shfletuesit që përdoren sot. Bashkëngjitur një Handler Listing 10: Bashkëngjitur dhe duke hequr handlers sipas W3C element.addEventListener ( ngjarje, mbajtës, fazë ) [/Code] element. removeEventListener ( ngjarje, mbajtës, fazë ) [/Code]
Veprimet lidhur Event: Ne duhet të kujdeset për katër veprimet e mëposhtme, ndërsa trajtimin e veprimeve të lidhura me ngjarje · Regjistrohu mbajtës ngjarje: Kjo mund të bëhet duke vendosur elementet e pronës onevent e.g. onClick ose celësi shtyp në linjë, etj. Kjo punon me të gjithë shfletuesit, por ka një kufizim që ne mund të bashkëngjitni vetëm një mbajtës ngjarje për një element. Ngjarjet e bashkangjitur mund të hiqet në mënyrë të ngjashme duke përdorur detachEvent ose removeEventListener. · Marrë objektin ngjarje: Shumica e shfletuesit të kalojë objekt ngjarje si një argument për mbajtësit. Tre ngjarje në vijim janë të krijuara kur përdoruesi klikimeve miut e tij. o Mousedown: tregon se miu është presion. o Mouseup: tregon se miu është lëshuar. o Click: tregon se miut është i klikuar. Nëse kjo ndodh në suksesion, kjo tregon se një klik të dyfishtë ka ndodhur. · Extract information from the object – Hapi i tretë është informacioni i veprimit ekstrakt të lidhura nga objekti dhe ndërmerr veprime të. · Inform about the completion of the event – Ky është hap i fundit. Pasi ngjarja është ankand me sukses përfundimi i ngjarjes është shënuar. Summary: Për të përfunduar diskutimin ne mund të mbajë pikat e mëposhtme në mendje · Used to initiate an action which should be performed as per the customers need. · Events are of two types – ngjarje DOM dhe ngjarjet Dritare. · 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
Modele Java Script Dizajn
CSS3 & JavaScript
Java Script and CSS3 properties
