{"id":540,"date":"2024-01-17T21:31:38","date_gmt":"2024-01-17T21:31:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=540"},"modified":"2024-01-18T18:16:40","modified_gmt":"2024-01-19T00:16:40","slug":"dispatching-an-event","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/dispatching-an-event\/","title":{"rendered":"Dispatching an Event"},"content":{"rendered":"\n<p>Sometimes when crafting up some quick interactive vanilla JavaScript, I add an event listener and write the functionality I want to happen right there. For example, here&#8217;s a super basic character counter:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">output<\/span>&gt;<\/span>\n  Characters: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">output<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> input = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\"input\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> output = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\"output &gt; span\"<\/span>);\n\ninput.addEventListener(<span class=\"hljs-string\">\"input\"<\/span>, () =&gt; {\n  output.innerHTML = input.value.length;\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Totally works. But, you won&#8217;t see any character count <em>until you start typing something. <\/em>That&#8217;s probably not ideal. It should count the characters when this HTML initially loads. <\/p>\n\n\n\n<p>So how do you fire off an initial count? One way is to shoot a &#8220;synthetic&#8221; event at the input, so that event hander fires. That&#8217;s right, you can just create an event out of thin air with code and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget\/dispatchEvent\">dispatch it<\/a>. Like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">input.dispatchEvent(\n  <span class=\"hljs-keyword\">new<\/span> Event(<span class=\"hljs-string\">\"input\"<\/span>, {\n    <span class=\"hljs-attr\">bubbles<\/span>: <span class=\"hljs-literal\">true<\/span>,\n    <span class=\"hljs-attr\">cancelable<\/span>: <span class=\"hljs-literal\">true<\/span>\n  })\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Works!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYaWdEw\" src=\"\/\/codepen.io\/anon\/embed\/LYaWdEw?height=450&amp;theme-id=47434&amp;slug-hash=LYaWdEw&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYaWdEw\" title=\"CodePen Embed LYaWdEw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That&#8217;s not the <em>only<\/em> way do this. We could make the event handler call a function (instead of using an anonymous function) and then just call that function once ourselves. That&#8217;s probably, generally, a more sane way to go about it. But it&#8217;s good to know multiple ways. Plus, some event handler functions use the event as a parameter to do things, and rather than write logical conditions on the presence of that event, providing the synthetic one makes that easier. <\/p>\n\n\n\n<p class=\"learn-more\">Lots more to learn on the <a href=\"https:\/\/frontendmasters.com\/learn\/javascript\/?utm_source=boost&amp;utm_medium=blog&amp;utm_campaign=boost\">JavaScript Learning Path<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes when crafting up some quick interactive vanilla JavaScript, I add an event listener and write the functionality I want to happen right there. For example, here&#8217;s a super basic character counter: Totally works. But, you won&#8217;t see any character count until you start typing something. That&#8217;s probably not ideal. It should count the characters [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":549,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[75,3],"class_list":["post-540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-events","tag-javascript"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/dispatch-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=540"}],"version-history":[{"count":9,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/540\/revisions"}],"predecessor-version":[{"id":587,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/540\/revisions\/587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/549"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}