{"id":18704,"date":"2020-06-30T12:48:40","date_gmt":"2020-06-30T19:48:40","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18704"},"modified":"2023-12-01T03:37:03","modified_gmt":"2023-12-01T11:37:03","slug":"javascript-events","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-events\/","title":{"rendered":"JavaScript Events: Three Ways to Create an Event"},"content":{"rendered":"\n<p>Adding interactive features to a website is where JavaScript shines. Whereas HTML and CSS are used to set the structure and styles of a web page, respectively, you can use JavaScript to make your site more dynamic.<br><\/p>\n\n\n\n<p>In JavaScript, events are used to make a site interactive. In this guide, we\u2019re going to talk about JavaScript events. We\u2019ll explore where events may be used, how to define an event, and how to call an event. Let\u2019s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is a JavaScript Event?<\/h2>\n\n\n\n<p>Events can either be triggered by the browser or the user and are capable of modifying the state of the web page. When you click a button on a web page, a JavaScript event is created. When you click on a dropdown menu that expands, a JavaScript event is used.<br><\/p>\n\n\n\n<p>JavaScript events have a wide range of uses, which include:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Checking whether a form has been filled out<\/li>\n\n\n\n<li>Navigating a user to another page when they have filled out a form<\/li>\n\n\n\n<li>Making dropdown menus interactive<\/li>\n\n\n\n<li>Allowing a user to zoom in and out of images<\/li>\n<\/ul>\n\n\n\n<p>To work with events in JavaScript, you need to know about two concepts: event handlers and event listeners.<br><\/p>\n\n\n\n<p>An event handler is a function that is run when an event is triggered on a web page. Event listeners connect an event function to an HTML element, so when that function is executed, the web element is changed.<br><\/p>\n\n\n\n<p>Event handlers can be defined in one of three ways: using either an inline event handler, an event property, or an event listener.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inline Event Handlers<\/h2>\n\n\n\n<p>The easiest way to get started with events in JavaScript is to use an inline event handler. This means that you\u2019ll define your event <strong>in your HTML file.<\/strong><br><\/p>\n\n\n\n<p>For this example, let\u2019s suppose that we are designing a website for a bakery called JJ Smith\u2019s Bakery. We want a user to be prompted with the text \u201cResponse received.\u201d when they submit a form.<br><\/p>\n\n\n\n<p>Consider the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\t&lt;head&gt;\n\t\t&lt;title&gt;JJ Smith's Bakery&lt;\/title&gt;\n\t&lt;\/head&gt;\n\t&lt;script src=\"main.js\"&gt;&lt;\/script&gt;\n\t&lt;body&gt;\n\t\t&lt;p id=\"submitted\"&gt;&lt;\/p&gt;\n\t\t&lt;button onclick=\"submitForm()\"&gt;Submit form&lt;\/button&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>This code renders a web page which looks like this:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/yhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7_eSoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe\" alt=\"\"\/><\/figure>\n\n\n\n<p>So far, not much is going on. Our web page contains a button that should do something when we click our button. When we click our button, nothing happens. This is because we have yet to write our event handler.<br><\/p>\n\n\n\n<p>In the file main.js, paste in the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const submitForm = () =&gt; {\n\tconst text = document.getElementById(\"submitted\");\n\ttext.textContent = \"Form submitted.\"\n}<\/pre><\/div>\n\n\n\n<p>This code will find the element with the ID \u201csubmitted\u201d, and will modify its content to be \u201cForm submitted.\u201d This code will only run when our <code>submitForm()<\/code> function is called. This is scheduled to happen when the user clicks on our button.<br><\/p>\n\n\n\n<p>When we click our button, the following happens:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/1yPShFvcLQLHsW7DbTwR61BX-JoAE9CM9kBhpL_IXklawyTFfnxxTOedVLWiyfMA9b-hoGVMBTTZo9BDKsDhHlIdzc-TvCnZKS4hBswqmdUqX_pPjo1OwJs2FrbcifbDKM-kF7Kz\" alt=\"\"\/><\/figure>\n\n\n\n<p>As you can see, our prompt appears. We\u2019ve used an inline event handler to make our web page interactive. But inline event handlers are not the only way to use events in JavaScript. Let\u2019s discuss how to use the event handler property in our code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Events with Handler Properties<\/h2>\n\n\n\n<p>In an inline handler, you need to specify which function you want to execute in your HTML file. In our HTML code from earlier, this line is where we defined the function we wanted to call when our button was pressed:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;button onclick=\"submitForm()\"&gt;Submit form&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<p>Using handler properties, we can remove the \u201conclick\u201d event from our code. This allows us to move all of the JavaScript that makes our web page interactive into its own file. For this example, we\u2019re going to assign our button the ID \u201cbutton\u201d, so that we can identify our button in our JavaScript code. Let\u2019s remove the onclick event and assign our button an ID: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;button id=\"button\"&gt;Submit form&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<p>In order to get our event to fire when our button is pressed, we are going to write an event with a handler property inside our \u201cmain.js\u201d file. Here\u2019s the code that we will use:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const submitForm = () =&gt; {\n\tconst text = document.getElementById(\"submitted\");\n\ttext.textContent = \"Form submitted.\"\n}\nconst button = document.getElementById(\"button\")\nbutton.onclick = submitForm;<\/pre><\/div>\n\n\n\n<p>When you run this code and click on the button, the following is returned:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/4o62_fifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt-csRgZsCf8qnj13uN1VyaoDaapwFE4pG_bMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8_Hcaym_yGeDzjzFwo\" alt=\"\"\/><\/figure>\n\n\n\n<p>Our button functions in the same way as earlier, but our code is written in a different way. Rather than writing our event handlers inline, we moved them to our main.js file. This helps us write more maintainable code because we don\u2019t need to read through all our HTML code to find out where our inline events are triggered.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Event Listener<\/h2>\n\n\n\n<p>Event listeners can be used to declare an event in JavaScript. Listeners are always looking for when the state of an element is changed, and if that element is changed, the code in the listener will be executed.<br><\/p>\n\n\n\n<p>For instance, when you click on a button that\u2019s attached to an event listener, the listener will \u201chear\u201d that a mouse event has been triggered. Then it will execute the code you have associated with that particular event listener.<br><\/p>\n\n\n\n<p>Our HTML code for this example is the same as above, but we\u2019re going to make a minor change to our \u201cmain.js\u201d file:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const submitForm = () =&gt; {\n\tconst text = document.getElementById(\"submitted\");\n\ttext.textContent = \"Form submitted.\"\n}\nconst button = document.getElementById(\"button\")\nbutton.addEventListener(\"click\", submitForm);<\/pre><\/div>\n\n\n\n<p>In this code, we are using <code>addEventListener<\/code> to create an event listener. This is instead of binding our <code>submitForm()<\/code> JavaScript function to an onclick event as we did in our last two examples.&nbsp;<br><\/p>\n\n\n\n<p>We specify \u201cclick\u201d to tell our code to listen for when our button is clicked with the mouse pointer. There are other event types aside from the click event\u2014such as keyboard events\u2014but we\u2019ll focus on the mouse click event in this tutorial.<br><\/p>\n\n\n\n<p>Let\u2019s run our code again and click our button.<br><\/p>\n\n\n\n<p>The output is the same as we\u2019ve seen in our last two examples, but this time we\u2019re using an HTML event listener. Event listeners are the newest way to declare events in JavaScript, and they are perhaps the most common method used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>JavaScript events allow you to make your web page interactive. An event could be triggered when you press a button, submit a form, or hover over some text. There are three ways to declare an event in JavaScript: inline, using a property, or using a listener.<br><\/p>\n\n\n\n<p>Now you\u2019re ready to start creating events in JavaScript like a professional web developer!<\/p>\n","protected":false},"excerpt":{"rendered":"Adding interactive features to a website is where JavaScript shines. Whereas HTML and CSS are used to set the structure and styles of a web page, respectively, you can use JavaScript to make your site more dynamic. In JavaScript, events are used to make a site interactive. In this guide, we\u2019re going to talk about&hellip;","protected":false},"author":240,"featured_media":18474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-18704","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Events: Three Ways to Create an Event | Career Karma<\/title>\n<meta name=\"description\" content=\"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-events\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Events: Three Ways to Create an Event\" \/>\n<meta property=\"og:description\" content=\"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-events\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T19:48:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:37:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"574\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript Events: Three Ways to Create an Event\",\"datePublished\":\"2020-06-30T19:48:40+00:00\",\"dateModified\":\"2023-12-01T11:37:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/\"},\"wordCount\":1020,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/james-harrison-vpOeXr5wmR4-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/\",\"name\":\"JavaScript Events: Three Ways to Create an Event | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/james-harrison-vpOeXr5wmR4-unsplash.jpg\",\"datePublished\":\"2020-06-30T19:48:40+00:00\",\"dateModified\":\"2023-12-01T11:37:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/james-harrison-vpOeXr5wmR4-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/james-harrison-vpOeXr5wmR4-unsplash.jpg\",\"width\":1020,\"height\":574},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-events\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Events: Three Ways to Create an Event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Events: Three Ways to Create an Event | Career Karma","description":"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.","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:\/\/careerkarma.com\/blog\/javascript-events\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Events: Three Ways to Create an Event","og_description":"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-events\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-30T19:48:40+00:00","article_modified_time":"2023-12-01T11:37:03+00:00","og_image":[{"width":1020,"height":574,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript Events: Three Ways to Create an Event","datePublished":"2020-06-30T19:48:40+00:00","dateModified":"2023-12-01T11:37:03+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/"},"wordCount":1020,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-events\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/","url":"https:\/\/careerkarma.com\/blog\/javascript-events\/","name":"JavaScript Events: Three Ways to Create an Event | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg","datePublished":"2020-06-30T19:48:40+00:00","dateModified":"2023-12-01T11:37:03+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"JavaScript events allow you to change features on a web page. On Career Karma, learn three ways to write events in JavaScript.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-events\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/james-harrison-vpOeXr5wmR4-unsplash.jpg","width":1020,"height":574},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-events\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Events: Three Ways to Create an Event"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18704"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18474"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}