Miksi ja miten mukautettuja jQuery-tapahtumia

Jo 1.0:ssa jQuery on tarjonnut laukaisutoiminnon, jonka avulla voimme:

Suorita kaikki tietyn tapahtumatyypin vastaaviin elementteihin liitetyt käsittelijät ja toiminnot.

Mutta vasta 1.3, tämä toiminto tuli huomattavasti hyödyllisemmäksi, ainakin minun mielestäni. Sanon tämän, koska silloin saimme mahdollisuuden määrittää mukautettuja tapahtumia ja sitten asettaa niille käsittelijät.

Mikä on kuitenkin todennäköinen käyttötapaus, jossa mukautetut jQuery-tapahtumat ovat hyödyllisiä WordPressin yhteydessä? Päältäsi saatat keksiä monia. Tai ehkä ei.

Vasta viime aikoina olen käyttänyt niitä huomattavasti tavallista enemmän. Joten ajattelin kertoa, kuinka käytän niitä, jos nyt muusta syystä kuin näyttää, kuinka ne kytketään työhösi.

Mukautetut jQuery-tapahtumat

Jos olet kokenut JavaScriptin – vanilja tai ei – olet todennäköisesti perehtynyt perustapahtumakäsittelijöihin. Eli kun joku napsauttaa elementtiä, meillä on toiminto, joka on asetettu laukeamaan, joka tekee jotain.

Mukautetut jQuery-tapahtumat ovat paljon samanlaisia, paitsi nämä ovat tapahtumia, jotka määrittelemme. Tämä tarkoittaa, että meidän ei tarvitse luottaa siihen, kun joku siirtää hiiren elementin päälle tai kun hän napsauttaa elementtiä.

Sen sijaan voimme laukaista tapahtuman ja määrittää sitten käsittelijän vastaamaan asianmukaisesti. Tässä on esimerkki.

Valmistautuminen mukautettuun tapahtumaan

Oletetaan, että työskentelet projektin parissa ja siinä on hallintasivu, joka vastaa tietojen hakemisesta kolmannen osapuolen API:sta. Ohjauskulku näyttäisi suunnilleen tältä:

1. Käyttäjä napsauttaa painiketta,
2. Ajax-pyyntö aloitetaan ja se pyytää tietoja kolmannelta osapuolelta,
3. Pyynnön aikana näytön painikkeiden tulee olla poissa käytöstä,
4. Kun pyyntö on valmis, painikkeet voidaan ottaa uudelleen käyttöön,
5. Valinnaisesti näytölle voidaan kirjoittaa tilaviesti.

Jotta tämä tapahtuisi, se odottaa, että siinä on vähintään yksi painike (kuten syöttöelementissä) ja valinnainen tekstikenttä tai tekstialue, jossa pyynnön tila voi tapahtua.

Kun käyttäjä napsauttaa tapahtumaa, voimme käynnistää mukautetun tapahtuman. Voimme kutsua tätä tapahtumaa nimellä acme.ajax.processing. Sitten voimme käyttää jQueryn tarjoamaa done – toimintoa käsittelemään kaikkea, mitä haluamme puhdistaa jälkeenpäin, tai voimme käyttää mukautettua toimintoamme, jos haluamme käsitellä myös jotain.

Tässä molemmissa tarkastellaan molempia. Meillä on siis myös tapahtuma nimeltä acme.ajax.complete.

Olemme siis huolissamme:

• mukautetun tapahtuman luominen,
• laukaisee sen,
• perustaa sille tapahtumakäsittelijän,
• loppuun, kun pyyntö on valmis.

Ja niin me teemme.

Mukautetun tapahtuman määrittäminen

Joten kun käyttäjä napsauttaa painiketta, Ajax-pyyntö tehdään. Samaan aikaan tämä käynnistää myös acme.ajax.processing- tapahtuman, jolla on tapahtumakäsittelijä.

Joten ensin luodaan Ajax-pyyntö. Tätä varten aion olettaa, että painiketta, joka on vastuussa Ajax-pyynnön käynnistämisestä, kutsutaan yksinkertaisesti nimellä $button:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  });
});

Huomaa, että ensimmäinen asia, jonka haluamme tehdä, on käynnistää käsittelytapahtuma ja sitten teemme pyynnön.

Mukautetun tapahtuman käsittely

Seuraavaksi haluamme varmistaa, että meillä on tapahtumakäsittelijä, joka poistaa painikkeen käytöstä pyynnön aikana.

Tämä on helppo tehdä ja pitää tämä yksinkertaisena, ja aion poistaa painikkeen käytöstä:

$(document).on('acme.ajax.processing', function() {
  $button.attr('disabled', 'disabled');
});

Helppoa, eikö?

Toisen mukautetun tapahtuman käsittely

Seuraavaksi meidän on käsiteltävä tilanne, kun Ajax-pyyntö on suoritettu. Joten meidän on varmistettava tapahtuman käynnistäminen ja sitten meidän on käsiteltävä tapahtuma.

Tapahtuman käynnistäminen on helppoa:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  })
  .done(function() {
     $(document).trigger('acme.ajax.complete');
  });
});

Ja tapahtuman käsittely voidaan muuttaa jo olemassa olevaan koodiin:

$(document)
  .on('acme.ajax.processing', function() {
    $button.attr('disabled', 'disabled');
  })
  .on('acme.ajax.complete', function() {
    $button.removeAttr('disabled');
  });

Se voidaan ketjuttaa, koska se tapahtuu dokumenttiobjektissa – ei erillisessä elementissä.

Sitä varten se on paljon helpompi käsitellä.

Vain Yksi esimerkki

Tämä on tietysti vain yksi esimerkki mukautettujen jQuery-tapahtumien käsittelystä.

On monia muita tapoja tehdä tämä, ja voit tehdä sen kanssa melko monimutkaisia ​​asioita; Tämän pitäisi kuitenkin tarjota riittävästi tietoa siitä, mitä tarvitset mukautettujen tapahtumien käsittelyyn perustasolla.