{"id":367,"date":"2011-12-20T13:11:25","date_gmt":"2011-12-20T13:11:25","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:02:09","modified_gmt":"2017-11-16T23:02:09","slug":"lesson-15-events-javascript-part-1","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/","title":{"rendered":"JavaScript Lesson 15: Introduction to Events"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\">&lt;Lesson 14&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\">&lt;Lesson 16&gt;<\/a><\/strong><\/h4>\n<p>In this lesson, we shall learn about the concept of events in JavaScript. What is an event? Any action that triggers the execution of JavaScript program code is called an event. Events are usually triggered by the web users. For example, clicking the mouse is an event, dragging the mouse over a hyperlink is also an event. There are three categories of events in JavaScript, namely events associated with forms, events associated with links and events associated with windows. In this lesson, we shall only discuss the\u00a0<strong>onClick event<\/strong>.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3><strong>15.1 Events For forms<\/strong><\/h3>\n<table style=\"table-layout: fixed; width: auto; font-size: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<th><strong>Event<\/strong><\/th>\n<th><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td>onclick<\/td>\n<td>Occurs when the user clicks a mouse button, checkbox, radio button, submit button or reset button<\/td>\n<\/tr>\n<tr>\n<td>onfocus<\/td>\n<td>Occurs when the user clicks the mouse button or uses the tab to bring attention to certain form elements such as a text box.<\/td>\n<\/tr>\n<tr>\n<td>onselect<\/td>\n<td>Occurs when the user selects text by dragging the mouse across a certain part of the text.<\/td>\n<\/tr>\n<tr>\n<td>onblur<\/td>\n<td>Occurs when the user removes the focus from a currently in-focus form element.<\/td>\n<\/tr>\n<tr>\n<td>onchange<\/td>\n<td>Occurs when the users alter the input into form elements, such as a text box.<\/td>\n<\/tr>\n<tr>\n<td>onsubmit<\/td>\n<td>Occurs when the users click the Submit button of a form.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>View <a href=\"http:\/\/javascript-tutor.net\/index.php\/list-events-javascript\/\">more events<\/a><\/p>\n<h3><strong>15.2 Writing Scripts for the Events<\/strong><\/h3>\n<p>We need to write JavaScript code for an event so that the triggered event can do something. Here, we are showing you how to write code for the onClick event. In Example 15.1, we present two form elements to the users, one of them is the textbox and the other one is the Click button. We also wrote a function checktext(form) to process the text entered by the users. If the user does not enter anything, he or she will be presented with a pop-up alert dialog to remind he or she the textbox is empty. Otherwise, the web page will show the text entered by the user.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 15.1: Writing script for an onClick event<\/strong><\/h4>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;New Page 1&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;script language=\"javascript\"&gt;\r\nfunction checktext(form){\r\nvar textcontent;\r\ntextcontent=form.textbox.value;\r\nif (form.textbox.value==\"\")\r\nalert(\"the textbox is empty, please write something in the textbox\")\r\nelse\r\ndocument.write(textcontent);\r\n}\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;Form&gt;\r\n&lt;input\u00a0size=\"50\"&gt;\r\n&lt;Input VALUE=\"Click Here\" onClick=\"checktext(this.form)\"&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Please click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example15.1.htm\">Example 15.1<\/a> to test the output<\/p>\n<h3><strong>15.2: Another example of an onclick event<\/strong><\/h3>\n<p>Here is another example of onClick event. In this example, we created a combo box using the SELECT and the OPTION elements of the form. We have also created a loadHtml function to let the user select the item and load the web page indicated in the combo box by clicking the button. The code is follow:<\/p>\n<div class=\"codebg\">\n<h3><strong>Example 15.2<\/strong><\/h3>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;Example 15.2: Another OnCick event for JavaScript&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;\r\n&lt;script&gt;\r\nfunction loadHtml(form){\r\nif (form.list.selectedIndex==0) location=\"art.html\"\r\nif (form.list.selectedIndex==1) location=\"astro.html\"\r\nif (form.list.selectedIndex==2) location=\"bestsell.html\"\r\nif (form.list.selectedIndex==3) location=\"business.html\"\r\nif (form.list.selectedIndex==4) location=\"children.html\"\r\nif (form.list.selectedIndex==5) location=\"computer.html\"\r\nif (form.list.selectedIndex==6) location=\"health.html\"\r\nif (form.list.selectedIndex==7) location=\"mystery.html\"\r\nif (form.list.selectedIndex==8) location=\"horror.html\"\r\nif (form.list.selectedIndex==9) location=\"nonfic.html\"\r\nif (form.list.selectedIndex==10) location=\"romance.html\"\r\nif (form.list.selectedIndex==11) location=\"science.html\"\r\nif (form.list.selectedIndex==12) location=\"scific.html\"\r\nif (form.list.selectedIndex==13) location=\"self.html\"\r\nif (form.list.selectedIndex==14) location=\"sports.html\"\r\nif (form.list.selectedIndex==15) location=\"travel.html\"\r\nif (form.list.selectedIndex==16) location=\"young.html\"\r\nif (form.list.selectedIndex==17) location=\"music.html\"\r\n\r\n}\r\n&lt;\/script&gt;\r\n\r\n&lt;Form ACTION=\"\" METHOD=\"GET\"&gt;\r\n&lt;SELECT size=\"4\"&gt;\r\n&lt;OPTION&gt;Art and Drawing\r\n&lt;OPTION&gt;Astronomy\r\n&lt;OPTION&gt;Best Sellers\r\n&lt;OPTION&gt;Business &amp; Investment\r\n&lt;OPTION&gt;Children Books\r\n&lt;OPTION selected&gt;Computer &amp; Internet\r\n&lt;OPTION&gt;Health &amp; Fitness\r\n&lt;OPTION&gt;Mystery\r\n&lt;OPTION&gt;Horror &amp; Thriller\r\n&lt;OPTION&gt;Non Fiction\r\n&lt;OPTION&gt;Romance\r\n&lt;OPTION&gt;Science &amp; Nature\r\n&lt;OPTION&gt;Science Fiction\r\n&lt;OPTION&gt;Self Improvement\r\n&lt;OPTION&gt;Sports &amp; Games\r\n&lt;OPTION&gt;Travel\r\n&lt;OPTION&gt;Young Readers' Corner\r\n&lt;OPTION&gt;Music\r\n&lt;\/SELECT&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;INPUT value=\"Select a category and Click here\" onClick=\"loadHtml(this.form)\"&gt;\r\n&lt;\/FORM&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n<\/pre>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example15.2.htm\">Example 15.2<\/a> to view the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 style=\"text-align: center;\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\">&lt;Lesson 14&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Table of Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\">&lt;Lesson 16&gt;<\/a><\/h4>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 14&gt; [Contents] &lt;Lesson 16&gt; In this lesson, we shall learn about the concept of events in JavaScript. What is an event? Any action that triggers the execution of JavaScript program code is called an event. Events are usually triggered by the web users. For example, clicking the mouse is an event, dragging the mouse &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 15: Introduction to Events&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-367","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"Learn how to write javascript to handle events\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"Learn how to write javascript to handle events\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:02:09+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\",\"name\":\"JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T13:11:25+00:00\",\"dateModified\":\"2017-11-16T23:02:09+00:00\",\"description\":\"Learn how to write javascript to handle events\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 15: Introduction to Events\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Learn how to write javascript to handle events","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:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"Learn how to write javascript to handle events","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:02:09+00:00","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/","name":"JavaScript Lesson 15: Introduction to Events - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T13:11:25+00:00","dateModified":"2017-11-16T23:02:09+00:00","description":"Learn how to write javascript to handle events","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 15: Introduction to Events"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":25,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":2494,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/367\/revisions\/2494"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}