Tapahtumien käsittely on toinen niistä suurista syistä käyttää jQueryä. Selaimen toiminnassa on joitain ristiriitoja, jotka jQuery normalisoituu yhdeksi yksinkertaiseksi sovellusliittymäksi samalla kun noudatetaan joitain parhaita käytäntöjä.
Sinun on tiedettävä olennaisesti yksi menetelmä: .on()- se toimii näin:
$("button").on("click", function() ( // do something ));Tässä annamme .on()menetelmälle vain kaksi parametria. Tapahtuman nimi ("napsautus") ja toiminto, joka suoritetaan, kun tapahtuma tapahtuu jollakin valinnan elementillä. Lukee melko puhtaasti, eikö olekin?
Henkilöt, joilla on jonkin verran aikaisempaa jQuery kokemusta voi tuntea muiden sitovien menetelmiä kuten .bind(), .live()tai .delegate(). Älä enää huolehdi niistä, moderni jQuery on yhdistänyt ne kaikki, .on()joihin aina kuuluu paras käytäntö.
Kun sidot tapahtuman kuten edellä teimme, voit (ja on yleensä järkevää) sisällyttää parametrin nimi funktioon. Kyseinen parametri on “tapahtumaobjekti” toiminnon sisällä:
$("button").on("click", function(event) ( // event => "the event object" ));Tämän tapahtumakohteen kautta saat paljon tietoa. Olet jo hieman perehtynyt siihen, koska käytimme sitä .preventDefault()ja .stopPropagation(). Mutta esineessä on myös paljon muuta suoraa tietoa. Asiat, kuten minkä tyyppinen tapahtuma se oli (jos useat tapahtumat käynnistävät saman toiminnon), milloin se tapahtui, missä tapahtui (koordinaatit, jos sovellettavissa), mihin elementtiin se tapahtui ja paljon muuta. Koodaamisen yhteydessä kannattaa tarkistaa tapahtumaobjekti säännöllisesti.
Tapahtumavaltuutuksella on erittäin tärkeä käsite tapahtumien käsittelyssä. Se on erittäin älykäs nykypäivän paras käytäntö. Se sisältää ajatuksen laajuudesta.
Perinteinen tapa ajatella tapahtumien sitomista on "löytää kaikki sivun painikkeet ja sitoa napsautustapahtuma niihin". Se tietysti toimii, mutta se on:
- Ei kovin tehokas
- Hauras
Ei tehokas, koska pakotat JavaScriptin heti löytämään kaikki painikeelementit, kun delegoinnin yhteydessä saatat löytää vain yhden helpommin löydettävän elementin.
Hauras, koska jos lisää painikkeita lisätään sivulle, he ovat jo unohtaneet veneen sidonnassa ja ne on sidottava uudelleen.
Tapahtumien delegoinnilla sidottaisit napsautustapahtuman elementtiin, joka on DOM-puun yläpuolella kuin painikkeet, jotka satunnaisesti sisältävät ne kaikki. Voi olla jonnekin, saattaa olla documentitse. Kun sidot napsautustapahtuman kyseiseen ylempään elementtiin, kerrot sille, että olet edelleen kiinnostunut vain napeilla tapahtuneista napsautuksista. Kun sitten painiketta napsautetaan tapahtuman kuplimisen luonteen kautta, kyseinen napsautus laukaisee lopulta ylemmän tason elementin. Mutta tapahtumaobjekti tietää, tapahtuiko alkuperäinen napsautus painikkeella vai ei, ja toiminto, jonka olet asettanut käynnistämään tapahtuman, joko käynnistyy tai ei käynnisty tietäen kyseiset tiedot.
Tässä kuvaruudussa osoitamme, että näin:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Nyt kuvitella jos lisäsi siihen . Meidän ei tarvitse sitoa mitään tapahtumia uudelleen, koska tapahtuma on edelleen mielellään sidottu laajuuteen ja tapahtumat kuplivat edelleen vasta lisätystä tekstialueesta. Tämä on erityisen hyödyllistä verkkosovellusympäristöissä, joissa lisäät sivulle säännöllisesti uusia elementtejä.
Toinen hyvä asia tietää jQuery-tapahtumien sitomisesta on, että ne eivät sulje pois toisiaan. Jos lisäät toisen napsautuksen käsittelijän samaan elementtiin, jolla jo on, se lisää vain toisen. Et korvaa edellistä. jQuery hoitaa tämän melko sulavasti sinulle. Voit aina irrottaa ne, jos todella halusit ohittaa aiemmin sidotun toiminnon.
Jos kyseessä on sama tarkka tapahtuma, on syytä tietää, että tietyn niistä vapauttamiseksi sinun on nimitila tapahtumia. Se tapahtuu käyttämällä pistettä tapahtuman nimessä, kuten click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), kuten emme ole aiemmin maininneet sitä, miten vapautat tapahtumia.
DOM-tapahtumia on paljon. Napsautus on iso tärkein ilmeinen, mutta siellä on kaksoisnapsautus, hiiren painike ja hiirenlehti, näppäinlukko ja näppäimistö, erityiset muodot, kuten sumennus ja muutos, ja paljon muuta. Jos olet kiinnostunut täydellisestä luettelosta, voit saada sellaisen.
Voit sitoa useita tapahtumia samanaikaisesti seuraavasti:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Joissakin olosuhteissa odotat tapahtuman tapahtumista, mutta kun se tapahtuu, et enää välitä siitä tai et halua nimenomaisesti käynnistää sidottua toimintoa. Tästä .one()toiminnosta on kyse. Tavallinen käyttötapaus on lomakkeen lähetyspainike (jos käsittelet Ajaxia tai mitä tahansa muuta). Haluat todennäköisesti olennaisesti poistaa kyseisen lähetyspainikkeen käytöstä, kun he ovat painaneet sitä, kunnes pystyt käsittelemään kyseiset tiedot ja antamaan heille asianmukaista palautetta. Se ei tietenkään ole ainoa käyttötapa, mutta pidä se vain mielessä. .one()== vain kerran.