{"id":18104,"date":"2016-12-27T20:25:57","date_gmt":"2016-12-27T20:25:57","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=18104"},"modified":"2017-10-16T20:14:04","modified_gmt":"2017-10-16T20:14:04","slug":"intro-to-events","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/intro-to-events\/","title":{"rendered":"Introduction to Events in the DOM with JavaScript"},"content":{"rendered":"<h2>Some of What DOM Events Can Do<\/h2>\n<p>DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include:<\/p>\n<ul>\n<li>Mouse events like onclick, on mouse over<\/li>\n<li>Keyboard events on for figuring out what keys are pressed and when<\/li>\n<li>Form elements like on submit, focus or change<\/li>\n<li>Media events like onplay, on pause, on onseeked<\/li>\n<li>Drag events like ondrag, ondragenter, ondrop<\/li>\n<li>General object events like onload, onresize, onscroll<\/li>\n<li>Other &#8211; clipboard, print, touch, transition, speech recognition<\/li>\n<\/ul>\n<p>In this overview video we look at demos of the different types of events you can work with in the DOM API using JavaScript.<\/p>\n<h2>Watch the Demos<\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/QE1YQnhntgw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/04\/1.4.1-Introduction-to-Events.zip\">Download the Demo Code<\/a><\/p>\n<h2>Taking it Further with Learning JavaScript<\/h2>\n<p>This video introduces a number of different types of Events in JavaScript that this <a href=\"https:\/\/javascriptforwp.com\/#enroll\" target=\"_blank\" rel=\"noopener\">JavaScript for WordPress Master Course<\/a> goes into much more depth with.<\/p>\n<p>If you are looking for a more advanced JavaScript Events video, check out our post on <a href=\"https:\/\/javascriptforwp.com\/lesson\/event-propagation-capturing-and-bubbling\/\" target=\"_blank\" rel=\"noopener\">Event Propagation with Capturing and Bubbling<\/a>.<\/p>\n<p>To take your learning even further, <a href=\"https:\/\/javascriptforwp.com\/#enroll\" target=\"_blank\" rel=\"noopener\">reserve a seat for the JavaScript for WordPress Master Course<\/a>. We cover everything you need to know about Events and much much more!!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some of What DOM Events Can Do DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include: Mouse events like onclick, on mouse over Keyboard events on for figuring out what keys are pressed and when Form elements like on submit, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[135],"tags":[],"class_list":["post-18104","post","type-post","status-publish","format-standard","hentry","category-free-videos"],"acf":[],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","course_icon":"","course_banner":"","latest-full-width":"","latest-grid-thumb":"","latest-grid-thumb-masonry":"","latest-woo-thumb":"","latest-nav-thumb":"","latest-mega-thumb":"","latest-fixed-thumb":"","latest-hero":"","latest-single":"","latest-hero-thumb":"","latest-logo":"","woocommerce_thumbnail":"","woocommerce_single":"","woocommerce_gallery_thumbnail":""},"post_excerpt_stackable":"<p>Some of What DOM Events Can Do DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include: Mouse events like onclick, on mouse over Keyboard events on for figuring out what keys are pressed and when Form elements like on submit, focus or change Media events like onplay, on pause, on onseeked Drag events like ondrag, ondragenter, ondrop General object events like onload, onresize, onscroll Other &#8211; clipboard, print, touch, transition, speech recognition In this overview video we look at demos of the different types of&hellip;<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","course_icon":"","course_banner":"","latest-full-width":"","latest-grid-thumb":"","latest-grid-thumb-masonry":"","latest-woo-thumb":"","latest-nav-thumb":"","latest-mega-thumb":"","latest-fixed-thumb":"","latest-hero":"","latest-single":"","latest-hero-thumb":"","latest-logo":"","woocommerce_thumbnail":"","woocommerce_single":"","woocommerce_gallery_thumbnail":""},"post_excerpt_stackable_v2":"<p>Some of What DOM Events Can Do DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include: Mouse events like onclick, on mouse over Keyboard events on for figuring out what keys are pressed and when Form elements like on submit, focus or change Media events like onplay, on pause, on onseeked Drag events like ondrag, ondragenter, ondrop General object events like onload, onresize, onscroll Other &#8211; clipboard, print, touch, transition, speech recognition In this overview video we look at demos of the different types of&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introduction to Events in the DOM with JavaScript - JavaScript for WordPress<\/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:\/\/javascriptforwp.com\/intro-to-events\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Events in the DOM with JavaScript - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"Some of What DOM Events Can Do DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include: Mouse events like onclick, on mouse over Keyboard events on for figuring out what keys are pressed and when Form elements like on submit, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/intro-to-events\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-27T20:25:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-16T20:14:04+00:00\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"Introduction to Events in the DOM with JavaScript\",\"datePublished\":\"2016-12-27T20:25:57+00:00\",\"dateModified\":\"2017-10-16T20:14:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/\"},\"wordCount\":209,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"articleSection\":[\"Free Videos\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/\",\"name\":\"Introduction to Events in the DOM with JavaScript - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"datePublished\":\"2016-12-27T20:25:57+00:00\",\"dateModified\":\"2017-10-16T20:14:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/intro-to-events\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Events in the DOM with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Events in the DOM with JavaScript - JavaScript for WordPress","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:\/\/javascriptforwp.com\/intro-to-events\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Events in the DOM with JavaScript - JavaScript for WordPress","og_description":"Some of What DOM Events Can Do DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include: Mouse events like onclick, on mouse over Keyboard events on for figuring out what keys are pressed and when Form elements like on submit, [&hellip;]","og_url":"https:\/\/javascriptforwp.com\/intro-to-events\/","og_site_name":"JavaScript for WordPress","article_published_time":"2016-12-27T20:25:57+00:00","article_modified_time":"2017-10-16T20:14:04+00:00","author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/intro-to-events\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/intro-to-events\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"Introduction to Events in the DOM with JavaScript","datePublished":"2016-12-27T20:25:57+00:00","dateModified":"2017-10-16T20:14:04+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/intro-to-events\/"},"wordCount":209,"commentCount":0,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"articleSection":["Free Videos"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/intro-to-events\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/intro-to-events\/","url":"https:\/\/javascriptforwp.com\/intro-to-events\/","name":"Introduction to Events in the DOM with JavaScript - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"datePublished":"2016-12-27T20:25:57+00:00","dateModified":"2017-10-16T20:14:04+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/intro-to-events\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/intro-to-events\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/intro-to-events\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"Introduction to Events in the DOM with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/18104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=18104"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/18104\/revisions"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=18104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=18104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=18104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}