Yleiskatsaus: Tässä artikkelissa aiomme keskustella selaimen tapahtumista JavaScript. Java script tapahtumat ovat erittäin tärkeitä, koska ne suorittaa useimmat tehtävät. Toinen tärkeä seikka on selaimen yhteensopivuutta. Koska java script on upotettu html-tiedostoja, suorituksen java script on selain riippuvainen. Java-skriptit myös kypsyneet tarpeeksi käsittelemään selain tapahtumia.
Käyttöönotto:
Selain tapahtuma on signaali selaimen kanteen asiassa kanteen suoritetaan. Nämä tapahtumat ovat seuraavanlaisia
- DOM Events: Nämä aloittanut DOM elementtejä esim. napsahduksen tapahtuma käynnistyy, kun elementti napsautetaan tai hiiren tapahtuma käynnistyy, kun hiiren osoitin on pysytellyt päälle elementin. Nämä tapahtumat kytkeä java script koodin kanssa asiakirjan.
- ikkuna Tapahtumat: Ne aloitetaan, kun selainikkunan kokoa muutetaan.
Mitä tapahtumia?
Tapahtuma voidaan määritellä toiminta / työ, joka lähettää signaalin java script. Nyt java skripti suoritetaan vastauksena jokin tapahtuma. Mutta tapahtuma olisi rekisteröitävä lähettämään signaalin vastaaviin java komentosarjakomponentti. Seuraavassa on joitakin tapahtumia.
ikkuna tapahtumia: Nämä tapahtumat käynnistyvät, kun selainikkunan kokoa muutetaan.
DOM tapahtumia: Nämä aloitetaan, kun DOM elementti suoriutuu joihinkin toimiin.
Muut tapahtumat: Nämä tapahtumat ovat huomioon kaikki muita tapahtumia lukuun ottamatta edellä kaksi.
tapahtumankäsittelijät: Meidän tulee ymmärtää, että on olemassa suuri ero java ja java script. Java, multi ketjuttaminen on mahdollista, mutta java script tapahtumat ovat Yksisäikeisessä. Joten tapahtumakäsittelijät suoritetaan peräkkäin. Täsmentämään, Oletetaan yksi käyttäjä on suorittanut kaksi tapahtumaa, mouseover ja sitten mousemove. Joten ylivierityksen toteutetaan ensin. Kun ensimmäinen tapahtuma on valmis, mousemove tapahtuma saavat suoritetaan.
Jos skripti on suorittaa kanne tapahtuman, sen pitäisi olla funktio liittyy se. Nämä toiminnot on tarkoitettu niin tapahtumankäsittelijät. Yleensä nämä toiminnot nimetään muodossa - on EVENT_NAME esim. onclick etc. Tapahtumakäsittelijät java script ovat Yksisäikeisessä ja suoritetaan peräkkäin. Näin ollen jos kaksi tapahtuvat samanaikaisesti, niiden käsittelijät toteutetaan yksi toisensa jälkeen. On monia tapoja, joilla Tapahtumakäsittelijät osoitettu. These are.
HTML tag: Tapahtumakäsittelijän voidaan liittää suoraan sisään markup käyttäen määritettä-tapahtumaan.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” arvo = “Klikkaa minua” onclick = “hälytys('Kiitos! Olen napsautti. ‘); ” type = “nappi” />
[/Code]
Kun tämä koodi suoritetaan, näemme painike etiketti – 'Klikkaa minua'. Jos käyttäjä osuu tämän painikkeen hälytysikkuna viesti – Thanks! Olen napsautti. Voimme myös soittaa toiminto tapahtumakäsittelylle. Tarkastellaan seuraavaa koodia
Listing 2: Tapahtumakäsittely käyttämällä toimintoa
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <pää> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| varten(var i = 1; minä <= 3; i ) { | |||||||||||||||
| hälytys( “Kani “+i ” hatusta!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </käsikirjoitus> | |||||||||||||||
| </pää> | |||||||||||||||
| <elin> | |||||||||||||||
| <input type = “nappi” onclick = “count_rabbits()” arvo = “Count kanit!”/> | |||||||||||||||
| </elin> | |||||||||||||||
| </html>[/Code]Toinen lähestymistapa sitoa tapahtuman käyttää this.innerHTML jos tämä viittaa nykyiseen elementtiin. Seuraava koodi havainnollistaa tätäListing 3: Tapahtuman käsittelijä käyttäen this.innerHTML
[Code] <painike onclick = “hälytys ( this.innerHTML )”> Klikkaa minua nähdä minut </nappi> [/Code] Käyttämällä DOM objekti Property: Tässä tehtävä on tehty käyttäen ominaisuutta – onevent. Tässä tapauksessa meidän täytyy saada elementtiin ensin ja sitten määritä käsittelijä omaisuutta onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Tapahtuman käsittelijä käyttäen DOM Object Property [Code] <input id = “myId” type = “nappi” arvo = “paina minut”/> <käsikirjoitus> document.getElementById( ‘ myId ‘ ).onclick = funktio() { hälytys('Kiitos') } </käsikirjoitus> [/Code] Tällöin on kaksi seuraavaa asiaa on todettava, jotta käyttää tätä – · It is a property, ei ominaisuus ja sen nimi on onevent joka on isot ja pienet kirjaimet tulee olla pienillä kirjaimilla. · The handler should be a function not a String. Kun selain havaitsee onevent määrite HTML markup, se luo funktion sen sisältöä ja määrittää sen omaisuutta. Joten seuraavan kahden koodin tekee saman Listing 5: Tapahtumakäsittely käyttäen vain HTML [Code] <input type = “nappi” onclick = “hälytys( 'Klikkaus!’ )” arvo = “nappi”/> [/Code] Listing 6: Tapahtumakäsittely HTML & JS. [Code] <input type = “nappi” id = “nappi” arvo = “nappi”/> <käsikirjoitus> document.getElementById("-painiketta").onclick = funktio() { hälytys('Klikkaus!’) } </käsikirjoitus> [/Code] JavaScript ylikirjoittaa käsittelijä asetettu markup. Seuraavassa katkelmassa korvaa markup käsittelijä uudella Listing 7: Korvaaminen käsittelijä setti. <input type =”nappi” onclick =”hälytys('Ennen')” value=”paina minut”/> <käsikirjoitus> document.getElementsByTagName("Input")[0].onclick = funktio() { hälytys('Jälkeen') } </käsikirjoitus> [/Code] Erityistutkintamenetelmien: Monimutkaisessa JavaScript-sovellus, jossa eri rajapinta menetelmiä käsitellä yleinen tapahtuma mukautettuja menetelmiä käytetään osoittamaan käsittelijät. Microsoft tarjoaa ratkaisun, joka toimii vain IE version alle 9 ja myös Opera. Käsittelijät osoitetaan ja irrottaa kuin alle Listing 8: Kiinnittämiseen ja irrottamiseen käsittelijät element.attachEvent( “on” + tapahtuma, käsittelijä) [/Code] Poistaminen Handler – [Code] element.detachEvent( “on” + tapahtuma, käsittelijä) [/Code] Käyttäminen liittää tapahtuma, voimme määrittää useita käsittelijät samaan elementtiin. Seuraava koodinpätkä näyttää tämän Listing 9: Määrittämällä useita käsittelijät yhteen elementtiin. [Code] <input id = “myElement” type = “nappi” arvo = “paina minut” /> <käsikirjoitus> var myElement = document.getElementById( “myElement” ) toimi = funktio() { hälytys( 'Kiitos!’ ) } olivat kaupat 2. = funktio() { hälytys( 'Kiitos taas!’ ) } myElement.attachEvent( “onclick”, käsittelijä) myElement.attachEvent( “onclick”, handler2) </käsikirjoitus> [/Code] Kiinnitä tapahtumia ei läpäise parametri "tämä". Kuten kohti W3C standardin seuraavan käsittelijä toimeksianto toimii lähes kaikissa selaimissa, joita käytetään tänään. Kiinnittämällä Handler Listing 10: Kiinnittämiseen ja irrottamiseen käsittelijät kohti w3c element.addEventListener ( tapahtuma, käsittelijä, vaihe ) [/Code] elementti. removeEventListener ( tapahtuma, käsittelijä, vaihe ) [/Code]
Tapahtuma liittyvät toimet: Meidän pitäisi huolehtia seuraavista neljästä toimia käsiteltäessä tapahtumaan liittyvät toimet · Rekisteröidä tapahtumakäsittelijää: Tämä voidaan tehdä asettamalla elementit onevent omaisuutta esim. onclick tai onkeypress jne. Tämä toimii koko selainta, mutta on rajoitus, että voimme liittää vain yksi tapahtumakäsittely elementti. Liitteenä tapahtumia voidaan poistaa samalla tavalla käyttäen detachEvent tai removeEventListener. · Hanki tapahtuma objekti: Suurin osa selaimista siirtää tapahtuman kohde argumenttina käsittelijälle. Seuraavat kolme tapahtumaa syntyy, kun käyttäjä napsauttaa hänen hiiri. o mousedown: osoittaa, että hiiri painetaan. o mouseup: osoittaa, että hiiri vapautetaan. o Click: osoittaa, että hiiri napsautetaan. Jos näin tapahtuu peräkkäin, tämä osoittaa, että tuplaklikkaa on tapahtunut. · Extract information from the object – Kolmas vaihe on uute toimintaa koskevat tiedot kohteesta, ja aloittaa toiminta. · Inform about the completion of the event – Tämä on viimeinen vaihe. Kun tapahtuma huutokaupataan onnistuneesti päätökseen tapahtuma on merkitty. Summary: Lopuksi keskustelu voimme pitää seuraavia kohtia mielessä · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM tapahtumia ja ikkuna tapahtumia. · 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
