{"id":4404,"date":"2016-03-01T17:57:37","date_gmt":"2016-03-01T17:57:37","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=4404"},"modified":"2017-10-09T13:58:39","modified_gmt":"2017-10-09T13:58:39","slug":"javascript-event-handlers-part-1","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/javascript-event-handlers-part-1","title":{"rendered":"JavaScript Event Handlers &#8211; onmouseover() and onmouseout()"},"content":{"rendered":"<h2>More interactivity &#8211; making several things happen at the same time<\/h2>\n<p>To change both the background color and the status bar message when the mouse pointer is passed over a link, you have to include two JavaScript statements to the same event handler, <em>onmouseover<\/em>.<\/p>\n<pre class=\"small-text\">\r\n&lt;A HREF=\"\/\/www.webdevelopersnotes.com\" \r\n<strong>onmouseover=\"window.status='Go Back To Home Page';\r\ndocument.bgColor='#EEEEEE'\"<\/strong>&gt;\r\nChange the background color and put a message on the status bar\r\n&lt;\/A&gt;\r\n<\/pre>\n<p>Note: The two JavaScript statements <strong>window.status=&#8217;Go Back To Home Page&#8217;<\/strong> and <strong>document.bgColor=&#8217;#EEEEEE&#8217;<\/strong> are separated by a semicolon which informs the JavaScript interpreter to treat the two as individual statements.<\/p>\n<div class=\"clr\"><\/div>\n<div class=\"bottom-ads\">\n<h4>Sponsored Links<\/h4>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- Inner Page Top - Non Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:inline-block;width:336px;height:280px\"\n     data-ad-client=\"ca-pub-1043128618639037\"\n     data-ad-slot=\"5670477364\"><\/ins>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"clr\"><\/div>\n<p>Each of these statements carries an instruction for the interpreter. The first one changes the message on the status bar while the second changes the background color. The statements are executed in the order they appear. You might not notice it with this example as the execution very fast.<\/p>\n<p><a href=\"\/\/www.webdevelopersnotes.com\" onmouseover=\"window.status='Go Back To Home Page';document.bgColor='#EEEEEE'\">Change the background color and put a message on the status bar<\/a><\/p>\n<p>A similar example is to bring up an alert box and change the background color.<\/p>\n<pre class=\"small-text\">\r\n&lt;A HREF=\"\/\/www.webdevelopersnotes.com\" \r\n<strong>onmouseover=\"window.alert('Go Back To Home Page');\r\ndocument.bgColor='#EEFFFF'\"<\/strong>&gt;\r\nChange the background color and bring up an alert box&lt;\/A&gt;\r\n<\/pre>\n<p><a href=\"\/\/www.webdevelopersnotes.com\" onmouseover=\"window.alert('Go Back To Home Page');document.bgColor='#EEFFFF'\">Change the background color and bring up an alert box<\/a><\/p>\n<p>When you pass the mouse cursor over the link above, you&#8217;ll notice that the alert box is displayed first, JavaScript execution is stopped. Once the OK button is clicked the next statement is executed that changes the background color.<\/p>\n<h2>Meeting another event handler &#8211; onmouseout()<\/h2>\n<p>To complement <em>onmouseover<\/em>, JavaScript provides the <strong>onmouseout<\/strong> event handler. It captures the event when the mouse pointer is taken off the link object.<\/p>\n<pre class=\"small-text\">\r\n&lt;A HREF=\"http:\/\/www.webdevelopersnotes.com\/\" \r\n<strong>onmouseout=\"document.bgColor='#FFEEEE'\"<\/strong>&gt;\r\nChanges the background color when the mouse \r\nis placed and then taken off the link\r\n&lt;\/A&gt;\r\n<\/pre>\n<p>Take your mouse pointer gradually over the link and keep it there&#8230; nothing happens; however, the moment you take it off, the background color is changed.<\/p>\n<p><a href=\"\/\/www.webdevelopersnotes.com\/\" onmouseout=\"document.bgColor='#FFEEEE'\">Changes the background color when the mouse is placed and then taken off the link<\/a><\/p>\n<h2>Using two event handlers for the same object<\/h2>\n<p>Here is an irritating psychedelic (?!) effect:<\/p>\n<pre class=\"small-text\">\r\n&lt;A HREF=\"http:\/\/www.webdevelopersnotes.com\/\" \r\n<strong>onmouseover=\"document.bgColor='#FFFF00'\"\r\nonmouseout=\"document.bgColor='#FFFFEE'\"<\/strong>&gt;\r\nMove your mouse over me!\r\n&lt;\/A&gt;\r\n<\/pre>\n<p><a href=\"\/\/www.webdevelopersnotes.com\/\" onmouseover=\"document.bgColor='#FFFF00'\" onmouseout=\"document.bgColor='#FFFFEE'\">Move your mouse over me!<\/a><\/p>\n<p>onmouseover changes the background color to a bright yellow while onmouseout changes it back to the original color.<br \/>(Moving the mouse over the link repeatedly will result in a bad headache!)<\/p>\n<div class=\"pagenav\">\n<ul>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-online-help-event-handlers-1\" title=\"Online help with Javascript event handlers\">&lt; Back<\/a><\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-tutorial\" title=\"JavaScript tutorial\">1<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-event-handlers-part-1\" title=\"Javascript onmouseover and javascript onmouseout event handlers\" class=\"thispage\">10<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-if-statement\" title=\"Javascript IF statement\">20<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/changing-images-on-mouseover-using-javascript\" title=\"Changing images on mouseover using Javascript\">30<\/a><\/li>\n<li>&#8230;<\/li>\n<li><a href=\"\/\/www.webdevelopersnotes.com\/javascript-event-handlers-part-2\" title=\"Javascript event handlers - onclick and ondblclick\">Next &gt;<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"More interactivity &#8211; making several things happen at the same time To change both the background color and the status bar message when the mouse pointer is passed over a link, you have to include two JavaScript statements to the same event handler, onmouseover. &lt;A HREF=&#8221;\/\/www.webdevelopersnotes.com&#8221; onmouseover=&#8221;window.status=&#8217;Go Back To Home Page&#8217;; document.bgColor=&#8217;#EEEEEE'&#8221;&gt; Change the background [&hellip;]","protected":false},"author":1,"featured_media":9438,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4404"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/9438"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}