{"id":3168,"date":"2019-12-09T00:21:32","date_gmt":"2019-12-09T00:21:32","guid":{"rendered":"https:\/\/hyperdrivedesigns.com\/?p=3168"},"modified":"2020-02-09T01:21:51","modified_gmt":"2020-02-09T01:21:51","slug":"creating-event-handlers-in-javascript","status":"publish","type":"post","link":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/","title":{"rendered":"Creating Event Handlers in JavaScript"},"content":{"rendered":"<p>Over the past 5 years, I had to redesign multiple websites and use some of the previous codebase as to not have to start from scratch. One thing I noticed a lot was previous developers using inline JavaScript click event.<\/p>\n<p>for example,<\/p>\n<pre class=\"line-numbers\"><code class=\"language-html\">&lt;button id=\"reset_btn\" class=\"primary\" onClick=\"resetPage();\"&gt;RESET&lt;\/button&gt;<\/code><\/pre>\n<p>Best practices suggest not to use this type of JavaScript inline event handlers if you can but create an Event Hander that will listen for the button click that will then run the JavaScript function.<\/p>\n<p>Here we just create the normal HTML button.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-html\">&lt;button id=\"reset_btn\" class=\"primary\"&gt;RESET&lt;\/button&gt;\r\n<\/code><\/pre>\n<p>Here is our JavaScript. We use the JavaScript window object to load the reset button Event Handler. Now, when the button is clicked, the resetPage function will execute. This is just a simple example that will reload the page.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\"> \r\nwindow.onload = function()\r\n{\r\n    document.getElementById('reset_btn').onclick=function(){resetPage();};\r\n}\r\n\r\nfunction resetTP() \r\n{\r\n    location.reload();\r\n}  \r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the past 5 years, I had to redesign multiple websites and use some of the previous codebase as to not have to start from scratch. One thing I noticed a lot was previous developers using inline JavaScript click event.<\/p>\n","protected":false},"author":1,"featured_media":3091,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[3,27],"tags":[],"acf":false,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Event Handlers in JavaScript - Hyperdrive Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Event Handlers in JavaScript - Hyperdrive Designs\" \/>\n<meta property=\"og:description\" content=\"Over the past 5 years, I had to redesign multiple websites and use some of the previous codebase as to not have to start from scratch. One thing I noticed a lot was previous developers using inline JavaScript click event.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Hyperdrive Designs\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-09T00:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-09T01:21:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/12\/javascript-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2250\" \/>\n\t<meta property=\"og:image:height\" content=\"1875\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/\",\"url\":\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/\",\"name\":\"Creating Event Handlers in JavaScript - Hyperdrive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\"},\"datePublished\":\"2019-12-09T00:21:32+00:00\",\"dateModified\":\"2020-02-09T01:21:51+00:00\",\"author\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\"},\"breadcrumb\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperdrivedesigns.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Event Handlers in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\",\"url\":\"https:\/\/hyperdrivedesigns.com\/\",\"name\":\"Hyperdrive Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/hyperdrivedesigns.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Event Handlers in JavaScript - Hyperdrive Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Creating Event Handlers in JavaScript - Hyperdrive Designs","og_description":"Over the past 5 years, I had to redesign multiple websites and use some of the previous codebase as to not have to start from scratch. One thing I noticed a lot was previous developers using inline JavaScript click event.","og_url":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/","og_site_name":"Hyperdrive Designs","article_published_time":"2019-12-09T00:21:32+00:00","article_modified_time":"2020-02-09T01:21:51+00:00","og_image":[{"width":2250,"height":1875,"url":"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/12\/javascript-post.png","type":"image\/png"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/","url":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/","name":"Creating Event Handlers in JavaScript - Hyperdrive Designs","isPartOf":{"@id":"https:\/\/hyperdrivedesigns.com\/#website"},"datePublished":"2019-12-09T00:21:32+00:00","dateModified":"2020-02-09T01:21:51+00:00","author":{"@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6"},"breadcrumb":{"@id":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hyperdrivedesigns.com\/creating-event-handlers-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperdrivedesigns.com\/"},{"@type":"ListItem","position":2,"name":"Creating Event Handlers in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/hyperdrivedesigns.com\/#website","url":"https:\/\/hyperdrivedesigns.com\/","name":"Hyperdrive Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/hyperdrivedesigns.com\/author\/darren\/"}]}},"_links":{"self":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3168"}],"collection":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/comments?post=3168"}],"version-history":[{"count":0,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media\/3091"}],"wp:attachment":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media?parent=3168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/categories?post=3168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/tags?post=3168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}