{"id":375,"date":"2011-12-20T14:03:08","date_gmt":"2011-12-20T14:03:08","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:03:07","modified_gmt":"2017-11-16T23:03:07","slug":"lesson-17-events-javascript-part-3","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/","title":{"rendered":"JavaScript Lesson 17: The onmouseover Event"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\">&lt;Lesson 16&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\">&lt;Lesson 18&gt;<\/a><\/strong><\/h4>\n<p>In the previous lessons, we have learned how to write code for the onClick, onChange and onSelect event handlers in JavaScript. In this lesson, we shall learn how to write code for the onmouseover and the onsubmit event handlers.<\/p>\n<h3><strong>17.1 The onmouseover Event<\/strong><\/h3>\n<p>The onMouseover event occurs when the user drags the mouse over certain elements of a web page, such as a hyperlink. In the following example, when the user drags the mouse over the hyperlink, a popup dialog will appear prompting he or she to click the OK button. After clicking the OK button, the user will be directed to the particular web page.<\/p>\n<p><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><strong>Example 17.1<\/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;Example 17.1: JavaScript event-onMouseover&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nfunction mylink()\r\n{alert(\"Taking you to the webpage now\");\r\nlocation.href=\"http:\/\/javascript-tutor.net\/\";\r\n}\r\n&lt;\/script&gt;\r\n&lt;a href=\"mypage\"\u00a0<span class=\"html-attribute-name\">onmouseover<\/span>=\"<span class=\"html-attribute-value\">mylink()\"<\/span>&gt;Click here to visit my webpage&lt;\/a&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/HTML&gt;\r\n\r\n<\/pre>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example17.1.htm\">Example 17.1<\/a> to view the output<\/p>\n<h3><strong>17.2 The onsubmit Event<\/strong><\/h3>\n<p>The onSubmit event is used to control the form submission process. It is usually used together with a Submit button on the web page. For example, you might want to remind that the user leaves a textbox empty or mistype something. You can write code to customize whatever you need to alert the user. For example, you can include the following code within the form tag to alert the user to enter his or her email address before the form is submitted:<\/p>\n<p>&lt;Form name=&#8221;yourform&#8221;&gt;&lt;\/form&gt;<\/p>\n<p>A fully coded example is shown below. In this example, if the user forget to enter his or her name, a dialog will pop up to remind the user to fill up his or her name. Once the user has enter his or her name and press the submit button, a message will appear to tell the user that the submission is successful.<\/p>\n<h4><strong>Example 17.2<\/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;Example 17.2: JavaScript event-onsubmit&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;script&gt;\r\nfunction checkname(form)\r\n{\r\nif (form.customer_name.value==\"\")\r\nalert(\"your have not fill up your name\");\r\nelse\r\ndocument.write(\"Your name is sucessfully submitted\");\r\n\r\n}\r\n&lt;\/script&gt;\r\n&lt;Form&gt;\r\nName: &lt;input\" value=\"\"&gt;\r\n&lt;input&gt;\r\n\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>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example17.2.htm\">Example 17.2<\/a> to check \u00a0it out.<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 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\">&lt;Lesson 16&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-18-events-javascript-part-4\/\">&lt;Lesson 18&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 16&gt; [Contents] &lt;Lesson 18&gt; In the previous lessons, we have learned how to write code for the onClick, onChange and onSelect event handlers in JavaScript. In this lesson, we shall learn how to write code for the onmouseover and the onsubmit event handlers. 17.1 The onmouseover Event The onMouseover event occurs when the user &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 17: The onmouseover Event&#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-375","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 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javacript lesson demonstrates the manipulation of 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:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javacript lesson demonstrates the manipulation of events in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:03:07+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 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-17-events-javascript-part-3\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\",\"name\":\"JavaScript Lesson 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T14:03:08+00:00\",\"dateModified\":\"2017-11-16T23:03:07+00:00\",\"description\":\"This javacript lesson demonstrates the manipulation of events in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 17: The onmouseover Event\"}]},{\"@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 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javacript lesson demonstrates the manipulation of 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:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javacript lesson demonstrates the manipulation of events in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:03:07+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/","name":"JavaScript Lesson 17: The onmouseover Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T14:03:08+00:00","dateModified":"2017-11-16T23:03:07+00:00","description":"This javacript lesson demonstrates the manipulation of events in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 17: The onmouseover Event"}]},{"@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\/375","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=375"}],"version-history":[{"count":21,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/375\/revisions"}],"predecessor-version":[{"id":2496,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/375\/revisions\/2496"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}