JQuery-opetusohjelma (osa 4)

Mainos

Tänään aiomme potkaista sen loven ja näyttää todella missä jQuery loistaa - Tapahtumat. Jos seurasi aiempia opetusohjelmia, sinun pitäisi nyt olla melko hyvä käsitys jQueryn peruskoodirakenne jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää (ja kaikki sen mukana olevat kauhistuttavat kiharaketjut), samoin kuin miten DOM: n ja joitain asioita, jotka voit tehdä manipuloidaksesi niitä Johdanto jQueryyn (osa 2): Menetelmät ja toiminnotTämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet sen sisällyttämisestä projektiisi ja valitsimiin. Osassa 2 jatkamme ... Lue lisää . Osoitin myös sinulle, miten pääset kehittäjäkonsoli Chromessa Selvitä verkkosivustojen ongelmat Chrome-kehittäjätyökaluilla tai FirebugillaJos olet toistaiseksi seurannut jQuery-oppaani, olet jo saattanut joutua joihinkin koodiongelmiin etkä tiedä kuinka korjata ne. Kun se kohtaa toimimattoman koodibitin, se on erittäin ...

Lue lisää ja kuinka voit käyttää sitä jQuery-koodisi vianetsintään.

Tapahtumien avulla voit muun muassa reagoida sivulla tapahtuviin asioihin ja käyttäjän vuorovaikutukseen - napsauttamalla, vierittämällä ja kaikkia näitä hienoja juttuja.

Mikä on tapahtuma joka tapauksessa?

Niille, jotka ovat uusia ohjelmoinnissa, johon sisältyy jonkinlainen graafinen käyttöliittymä, tapahtumilla tarkoitetaan kaikenlaista käyttäjän ja sovelluksen välistä vuorovaikutusta; tai voidaan luoda sisäisesti jollain muulla prosessilla. Sovellukset valitsevat mitä tapahtumia “kuunnella”, ja kun tapahtuma laukaistaan, ne voivat reagoida jollain tavalla.

Esimerkiksi napauttaminen iPhonen näytöllä tuottaa yhden ”napautustapahtuman” x-, y-koordinaateilla tarkalleen missä napautat. Jos napautat tiettyä objektia, kuten nappia, on todennäköistä, että painike kuunteli tapahtumaa ja suorittaa jonkin toiminnon vastaavasti. Jos se oli vain tyhjä osa käyttöliittymää, tapahtumaan ei liitetty mitään, joten mitään ei tapahdu.

Sormen vetäminen näytön poikki tuottaa uuden tapahtuman, joka sisältää tietoja vedon aloitus- ja loppupisteestä ja mahdollisesti nopeudesta. Tapahtumat tarjoavat meille helpon tavan reagoida tapahtumiin.

Helppo: napsauttamalla

Ehkä helpoin tapahtuma, jota voidaan kuunnella, on napsautustapahtuma, joka laukaistaan ​​aina, kun käyttäjä napsauttaa elementtiä. Tämän ei tarvitse olla tietty "painike" - voit kiinnittää tapahtuman kuuntelijan mihin tahansa näytön ruutuun, mutta Web-kehittäjänä sinun on tietenkin tehtävä siitä intuitiivinen. Pseudo-painikkeen luominen kirjaimesta piilotettu tekstin kappaleeseen on mahdollista, mutta hieman typerä.

Tapahtumakuuntelijan kiinnittämismenetelmät ovat muuttuneet huomattavasti vuosien mittaan, kun jQuery on kehittynyt, mutta tämä on nykyisin hyväksytty menetelmä, joka käyttää päällä():

$(valitsin).päällä(tapahtuma,toiminta);

Kuunnella “klikkaus”Tapahtuma luokan kaikissa osissa .clickme, ja kirjaa sitten viesti konsoliin, joka sisältää teksti napsautetusta elementistä tekisit:

$ ( "Clickme "). Päälle (" klik", toiminto () { console.log ($ (tämä) .text ()); });

Sinun pitäisi pystyä näkemään, että tässä upotettu toiminto on nimettömä toiminto, joka käyttää Tämä valitsin (joka tarkoittaa mitä tahansa objektia, jota jQuery parhaillaan käsittelee) - tässä tapauksessa se asia, jota napsautettiin. Sitten purkamme napsautetun kohteen tekstin ja kirjaamme sen konsoliin. Helppoa, eikö?

Lopeta oletustoiminto:

Jossain vaiheessa haluat liittää johonkin linkkiin tai lomakkeen lähettämispainikkeeseen, joka yleensä tekee jotain muuta. Tällöin on todennäköistä, ettet halua, että alkuperäinen toiminto suoritetaan - sen sijaan haluat tehdä hienoa AJAX- tai erityistä jQuery-taikuutta.

Jotta oletustoiminto ei tapahdu, meillä on kätevä menetelmä nimeltä preventDefault. Ilmeisesti. Katsotaanpa kuinka se toimisi käsitellessäsi lomakkeen lähetä-painiketta

$ ("# myForm"). on ("lähetä", toiminto (tapahtuma) { konsoli.logi (tapahtuma); event.preventDefault (); palauta väärä; });

Muutama muutos tässä - ensinnäkin, liitämme Lähetä tapahtuma napsautuksen sijasta. Tämä on tarkoituksenmukaisempaa käsitellessäsi lomaketta, kuten käyttäjä voi tab-space, osuma tulla sisään, tai paina a Lähetä -painike - joka laukaisee lomakkeen oletustoiminnan. Olemme myös siirtämässä tapahtumamuuttujaa nimettömään funktioon, joten voimme viitata tapahtuman tiedot. Olemme sitten käyttäneet event.preventDefault () yhdessä palauta väärä lopettaa kaikkien tavanomaisten toimien suorittamisen.

Tässä tapauksessa se kirjaa tapahtuman vain konsoliin, mutta todellisuudessa sinulla todennäköisesti olisi täällä AJAX-käsittelijä, jota käsittelemme seuraavassa oppitunnissa.

Voit myös käynnistää tapahtumia

Kahdessa edellisessä esimerkissä kuuntelimme tapahtumaa päällä -menetelmällä, mutta voit myös laukaista tapahtuman manuaalisesti kutsumalla sitä menetelmäksi. On vaikea ymmärtää, miksi voit käyttää tätä napsauttaaksesi napsautusta, mutta on järkevämpää, jos tarkastelemme fokustapahtumaa.

Tarkennusta käytetään tyypillisesti syöttökenttiin viestin laukaisemiseksi, kun käyttäjä napsauttaa ruutua kirjoittaaksesi tekstiä - esimerkiksi ohjeviestin käytettävässä muodossa. Mutta voit käyttää sitä myös käyttäjän pakottamiseen käyttäjänimi-kenttään, kun sivu on latautunut, jotta hän voi heti alkaa kirjoittaa kirjautumistietojaan.

$ (asiakirja). jo (toiminto () { $ ( "# Username'.focus (); });

Jos olisit myös kiinnittänyt tarkennustapahtuman kuuntelijan kyseiseen käyttäjänimekenttään, se laukaistaan ​​myös, kun pakotat tarkennuksen. Tapahtumat voidaan siis käynnistää ja kuunnella.

Harjoittele nyt liittämällä sivun erilaisiin tapahtumiin - löydät täydellisen luettelon kaikista tapahtumia täällä - muista käyttää prevenDefault-sovellusta, jos se on linkki tai painike, ja katso, minkä tulosteen konsoli saa tapahtumadatasta.

Jätän sen tänään, kun olemme lähellä tämän jQuery-opetusohjelmien minisarjan loppua. Sinun pitäisi loppujen lopuksi olla riittävän luottavainen heittämään jQueryä sivullesi ja saamaan sen tekemään jotain. Ensi viikolla tarkastellaan AJAX: ää - tärkeää osaa nykyaikaisesta webistä, jonka avulla voit ladata ja lähettää pyyntöjä taustalle häiritsemättä käyttäjää.

Kuten koskaan, palaute, kysymykset, kommentit ja ongelmat ovat tervetulleita alla.

Kuvaluotto: Kosketusnäyttö Shutterstockin kautta