{"id":230937,"date":"2022-12-08T16:50:00","date_gmt":"2022-12-08T13:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230937"},"modified":"2022-12-07T11:54:30","modified_gmt":"2022-12-07T08:54:30","slug":"miksi-ja-miten-mukautettuja-jquery-tapahtumia","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/miksi-ja-miten-mukautettuja-jquery-tapahtumia\/","title":{"rendered":"Miksi ja miten mukautettuja jQuery-tapahtumia"},"content":{"rendered":"\n<p>Jo 1.0:ssa jQuery on tarjonnut <a href=\"https:\/\/api.jquery.com\/trigger\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">laukaisutoiminnon<\/a>, jonka avulla voimme:<\/p>\n<blockquote>\n<p>Suorita kaikki tietyn tapahtumatyypin vastaaviin elementteihin liitetyt k\u00e4sittelij\u00e4t ja toiminnot.<\/p>\n<\/blockquote>\n<p>Mutta vasta 1.3, t\u00e4m\u00e4 toiminto tuli huomattavasti hy\u00f6dyllisemm\u00e4ksi, ainakin minun mielest\u00e4ni. Sanon t\u00e4m\u00e4n, koska silloin saimme mahdollisuuden m\u00e4\u00e4ritt\u00e4\u00e4 mukautettuja tapahtumia ja sitten asettaa niille k\u00e4sittelij\u00e4t.<\/p>\n<p>Mik\u00e4 on kuitenkin todenn\u00e4k\u00f6inen k\u00e4ytt\u00f6tapaus, jossa mukautetut jQuery-tapahtumat ovat hy\u00f6dyllisi\u00e4 WordPressin yhteydess\u00e4? P\u00e4\u00e4lt\u00e4si saatat keksi\u00e4 monia. Tai ehk\u00e4 ei.<\/p>\n<p>Vasta viime aikoina olen k\u00e4ytt\u00e4nyt niit\u00e4 huomattavasti tavallista enemm\u00e4n. Joten ajattelin kertoa, kuinka k\u00e4yt\u00e4n niit\u00e4, jos nyt muusta syyst\u00e4 kuin n\u00e4ytt\u00e4\u00e4, kuinka ne kytket\u00e4\u00e4n ty\u00f6h\u00f6si.<\/p>\n<h2>Mukautetut jQuery-tapahtumat<\/h2>\n<p>Jos olet kokenut JavaScriptin \u2013 vanilja tai ei \u2013 olet todenn\u00e4k\u00f6isesti perehtynyt perustapahtumak\u00e4sittelij\u00f6ihin. Eli kun joku napsauttaa elementti\u00e4, meill\u00e4 on toiminto, joka on asetettu laukeamaan, joka tekee jotain.<\/p>\n<p>Mukautetut jQuery-tapahtumat ovat paljon samanlaisia, paitsi n\u00e4m\u00e4 ovat tapahtumia, jotka m\u00e4\u00e4rittelemme. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 meid\u00e4n ei tarvitse luottaa siihen, kun joku siirt\u00e4\u00e4 hiiren elementin p\u00e4\u00e4lle tai kun h\u00e4n napsauttaa elementti\u00e4.<\/p>\n<p>Sen sijaan voimme laukaista tapahtuman ja m\u00e4\u00e4ritt\u00e4\u00e4 sitten k\u00e4sittelij\u00e4n vastaamaan asianmukaisesti. T\u00e4ss\u00e4 on esimerkki.<\/p>\n<h3>Valmistautuminen mukautettuun tapahtumaan<\/h3>\n<p>Oletetaan, ett\u00e4 ty\u00f6skentelet projektin parissa ja siin\u00e4 on hallintasivu, joka vastaa tietojen hakemisesta kolmannen osapuolen API:sta. Ohjauskulku n\u00e4ytt\u00e4isi suunnilleen t\u00e4lt\u00e4:<\/p>\n<ol>\n<li>K\u00e4ytt\u00e4j\u00e4 napsauttaa painiketta,<\/li>\n<li>Ajax-pyynt\u00f6 aloitetaan ja se pyyt\u00e4\u00e4 tietoja kolmannelta osapuolelta,<\/li>\n<li>Pyynn\u00f6n aikana n\u00e4yt\u00f6n painikkeiden tulee olla poissa k\u00e4yt\u00f6st\u00e4,<\/li>\n<li>Kun pyynt\u00f6 on valmis, painikkeet voidaan ottaa uudelleen k\u00e4ytt\u00f6\u00f6n,<\/li>\n<li>Valinnaisesti n\u00e4yt\u00f6lle voidaan kirjoittaa tilaviesti.<\/li>\n<\/ol>\n<p>Jotta t\u00e4m\u00e4 tapahtuisi, se odottaa, ett\u00e4 siin\u00e4 on v\u00e4hint\u00e4\u00e4n yksi painike (kuten <strong>sy\u00f6tt\u00f6elementiss\u00e4<\/strong>) ja valinnainen tekstikentt\u00e4 tai <strong>tekstialue<\/strong>, jossa pyynn\u00f6n tila voi tapahtua.<\/p>\n<p>Kun k\u00e4ytt\u00e4j\u00e4 napsauttaa tapahtumaa, voimme k\u00e4ynnist\u00e4\u00e4 mukautetun tapahtuman. Voimme kutsua t\u00e4t\u00e4 tapahtumaa <strong>nimell\u00e4 acme.ajax.processing<\/strong>. Sitten voimme k\u00e4ytt\u00e4\u00e4 jQueryn tarjoamaa <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">done<\/a> &#8211; toimintoa k\u00e4sittelem\u00e4\u00e4n kaikkea, mit\u00e4 haluamme puhdistaa j\u00e4lkeenp\u00e4in, tai voimme k\u00e4ytt\u00e4\u00e4 mukautettua toimintoamme, jos haluamme k\u00e4sitell\u00e4 my\u00f6s jotain.<\/p>\n<p>T\u00e4ss\u00e4 molemmissa tarkastellaan molempia. Meill\u00e4 on siis my\u00f6s tapahtuma nimelt\u00e4 <strong>acme.ajax.complete<\/strong>.<\/p>\n<p>Olemme siis huolissamme:<\/p>\n<ul>\n<li>mukautetun tapahtuman luominen,<\/li>\n<li>laukaisee sen,<\/li>\n<li>perustaa sille tapahtumak\u00e4sittelij\u00e4n,<\/li>\n<li>loppuun, kun pyynt\u00f6 on valmis.<\/li>\n<\/ul>\n<p>Ja niin me teemme.<\/p>\n<h3>Mukautetun tapahtuman m\u00e4\u00e4ritt\u00e4minen<\/h3>\n<p>Joten kun k\u00e4ytt\u00e4j\u00e4 napsauttaa painiketta, Ajax-pyynt\u00f6 tehd\u00e4\u00e4n. Samaan aikaan t\u00e4m\u00e4 k\u00e4ynnist\u00e4\u00e4 my\u00f6s <strong>acme.ajax.processing-<\/strong> tapahtuman, jolla on tapahtumak\u00e4sittelij\u00e4.<\/p>\n<p>Joten ensin luodaan Ajax-pyynt\u00f6. <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-00-button-handler-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">T\u00e4t\u00e4 varten<\/a><\/strong> aion olettaa, ett\u00e4 painiketta, joka on vastuussa Ajax-pyynn\u00f6n k\u00e4ynnist\u00e4misest\u00e4, kutsutaan yksinkertaisesti nimell\u00e4 <strong>$button:<\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  });\n});<\/code><\/pre>\n<p>Huomaa, ett\u00e4 ensimm\u00e4inen asia, jonka haluamme tehd\u00e4, on k\u00e4ynnist\u00e4\u00e4 k\u00e4sittelytapahtuma ja sitten teemme pyynn\u00f6n.<\/p>\n<h3>Mukautetun tapahtuman k\u00e4sittely<\/h3>\n<p>Seuraavaksi haluamme varmistaa, ett\u00e4 meill\u00e4 on tapahtumak\u00e4sittelij\u00e4, joka poistaa painikkeen k\u00e4yt\u00f6st\u00e4 pyynn\u00f6n aikana.<\/p>\n<p>T\u00e4m\u00e4 on helppo tehd\u00e4 ja pit\u00e4\u00e4 t\u00e4m\u00e4 yksinkertaisena, ja aion <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-01-disable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">poistaa painikkeen k\u00e4yt\u00f6st\u00e4:<\/a><\/strong><\/p>\n<pre><code>$(document).on('acme.ajax.processing', function() {\n  $button.attr('disabled', 'disabled');\n});<\/code><\/pre>\n<p>Helppoa, eik\u00f6?<\/p>\n<h3>Toisen mukautetun tapahtuman k\u00e4sittely<\/h3>\n<p>Seuraavaksi meid\u00e4n on k\u00e4sitelt\u00e4v\u00e4 tilanne, kun Ajax-pyynt\u00f6 on suoritettu. Joten meid\u00e4n on varmistettava tapahtuman k\u00e4ynnist\u00e4minen ja sitten meid\u00e4n on k\u00e4sitelt\u00e4v\u00e4 tapahtuma.<\/p>\n<p>Tapahtuman k\u00e4ynnist\u00e4minen <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-02-request-complete-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">on helppoa:<\/a><\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  })\n  .done(function() {\n     $(document).trigger('acme.ajax.complete');\n  });\n});<\/code><\/pre>\n<p>Ja tapahtuman k\u00e4sittely voidaan muuttaa <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-03-enable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jo olemassa olevaan koodiin:<\/a><\/strong><\/p>\n<pre><code>$(document)\n  .on('acme.ajax.processing', function() {\n    $button.attr('disabled', 'disabled');\n  })\n  .on('acme.ajax.complete', function() {\n    $button.removeAttr('disabled');\n  });<\/code><\/pre>\n<p>Se voidaan ketjuttaa, koska se tapahtuu <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumenttiobjektissa<\/a> \u2013 ei erillisess\u00e4 elementiss\u00e4.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" alt=\"Miksi ja miten mukautettuja jQuery-tapahtumia\" ><\/a><\/p>\n<p>Sit\u00e4 varten se on paljon helpompi k\u00e4sitell\u00e4.<\/p>\n<h2>Vain Yksi esimerkki<\/h2>\n<p>T\u00e4m\u00e4 on tietysti vain yksi esimerkki mukautettujen jQuery-tapahtumien k\u00e4sittelyst\u00e4.<\/p>\n<p>On monia muita tapoja tehd\u00e4 t\u00e4m\u00e4, ja voit tehd\u00e4 sen kanssa melko monimutkaisia \u200b\u200basioita; T\u00e4m\u00e4n pit\u00e4isi kuitenkin tarjota riitt\u00e4v\u00e4sti tietoa siit\u00e4, mit\u00e4 tarvitset mukautettujen tapahtumien k\u00e4sittelyyn perustasolla.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mik\u00e4 on kuitenkin todenn\u00e4k\u00f6inen k\u00e4ytt\u00f6tapaus, jossa mukautetut jQuery-tapahtumat ovat hy\u00f6dyllisi\u00e4 WordPressin yhteydess\u00e4? Ja miten voisimme itse asiassa k\u00e4ytt\u00e4\u00e4 niit\u00e4 p\u00e4ivitt\u00e4isess\u00e4 ty\u00f6ss\u00e4mme?<\/p>\n","protected":false},"author":1,"featured_media":236464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[730,719,895,834],"tags":[1166],"class_list":["post-230937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-kehittaejae","category-koodi","category-opas-aloittelijoille","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230937"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230937\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/236464"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}