{"id":44853,"date":"2019-05-03T03:01:28","date_gmt":"2019-05-02T17:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44853"},"modified":"2019-05-02T21:30:02","modified_gmt":"2019-05-02T11:30:02","slug":"html-onmouseleave-and-onmouseout-events-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-onmouseleave-and-onmouseout-events-primer-tutorial\/","title":{"rendered":"HTML Onmouseleave and Onmouseout Events Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onmouseleave.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Onmouseleave and Onmouseout Events Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onmouseleave.jpg\" title=\"HTML Onmouseleave and Onmouseout Events Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML Onmouseleave and Onmouseout Events Primer Tutorial<\/p><\/div>\n<p>Further to the event disrupters of <a title='HTML Event Disrupters Primer Tutorial' href='#htmledpt'>HTML Event Disrupters Primer Tutorial<\/a> we&#8217;re building a proof of concept on top of another proof of concept in order to talk about two HTML mouse events, those being &#8230;<\/p>\n<ul>\n<li>onmouseleave<\/li>\n<li><a target=_blank title='HTML onmouseout event information fromw3schools' href='https:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'>onmouseout<\/a><\/li>\n<\/ul>\n<p> &#8230; that happen with mouse hovering from inside an element (with the event) to leaving it.  On leaving it, it could be that you want it to disappear, but we leave all those thoughts for you, and we&#8217;d like to direct you to a <a target=_blank title='Great link' href='https:\/\/javascript.info\/mousemove-mouseover-mouseout-mouseenter-mouseleave'>great resource<\/a> (thanks) too.   For us, here, it is &#8220;proof of concept&#8221; time.<\/p>\n<p>At first we thought we&#8217;d write a totally new web application as the &#8220;proof of concept&#8221; but found that the difference between mouse hovering and mouse clicking was enough so that we could just add functionality on top of the previous work, as you can see with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onmouseleave.html-GETME\" title=\"onmouseleave.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onmouseleave.html-GETME\" title=\"onmouseleave.html\">onmouseleave.html<\/a> that you can play around with at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onmouseleave.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='htmledpt'>Previous relevant <a target=_blank title='HTML Event Disrupters Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-event-disrupters-primer-tutorial\/'>HTML Event Disrupters Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stopPropagation_preventDefault.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Event Disrupters Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stopPropagation_preventDefault.jpg\" title=\"HTML Event Disrupters Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML Event Disrupters Primer Tutorial<\/p><\/div>\n<p>Computer Programming has grown up a lot since the earlier languages, my favourite being, for years, FORTRAN, where a GOTO statement would not always be frowned upon, as much as anything because lazy programmers (cough, cough) could justify their &#8220;GOTO&#8221; fetishes with &#8220;well, all the error handling is GOTO anyway &#8230; so &#8230; there &#8230; ngah!&#8221;.<\/p>\n<p>But has it grown up all that much?  Think of all the &#8220;break&#8221; and &#8220;return&#8221; statement possibilities everywhere.  The fact is, the optimists will start something off on the quite likely 99% success rate path of coding, and &#8220;break&#8221;\/&#8221;return&#8221;\/&#8221;GOTO&#8221; code for that other 1% of reality that still needs attention.<\/p>\n<p>HTML event driven programming has its disrupters.  We try here not to use them, so much so that even though yours truly loves event driven programming, I&#8217;d never, to my recollection, used &#8230;<\/p>\n<ul>\n<li><a target=_blank title='event.stopPropagation' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopPropagation'>event.stopPropagation<\/a> &#8230; and maybe only once or twice &#8230;<\/li>\n<li><a target=_blank title='event.preventDefault' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/preventDefault'>event.preventDefault<\/a>\n<\/ul>\n<p> &#8230; and used not to know the former&#8217;s benefits.  You see event.stopPropagation had always been what I&#8217;d imagined I&#8217;d want, on rare occasions (when I ended up rearranging arrangements so as not to need to &#8220;disrupt&#8221; in the first place).  It stops &#8220;parent&#8221; HTML elements inheriting &#8220;child&#8221; event logics that &#8220;propagate&#8221; (some references use &#8220;bubbling&#8221;) up through the HTML hierarchy.  For a while I&#8217;d given &#8220;event.preventDefault&#8221; those superhuman powers, silly me!  But I&#8217;m right with it now.<\/p>\n<p>So why the interest?  We had a parent table element with loads of onclick logics of interest, yet we introduced a new input type=button that both had &#8230;<\/p>\n<ul>\n<li>a need to &#8220;geographically sit&#8221; within the confines of that table &#8230; but &#8230;<\/li>\n<li>that button&#8217;s onclick logic represented an optional bit of functionality, and it would have been wrong to also have the other onclick logics fire off when all the user wanted to do was do that optional button logic<\/li>\n<\/ul>\n<p>To better show you what we mean, we wrote a proof of concept web application called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stopPropagation_preventDefault.html_GETME\" title=\"stopPropagation_preventDefault.html\">stopPropagation_preventDefault.html<\/a> that you can try with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stopPropagation_preventDefault.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44747' onclick='var dv=document.getElementById(\"d44747\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/event\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44747' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44853' onclick='var dv=document.getElementById(\"d44853\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44853' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to the event disrupters of HTML Event Disrupters Primer Tutorial we&#8217;re building a proof of concept on top of another proof of concept in order to talk about two HTML mouse events, those being &#8230; onmouseleave onmouseout &#8230; that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-onmouseleave-and-onmouseout-events-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[400,576,652,2948,1661,997,1319],"class_list":["post-44853","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-event","tag-html","tag-javascript","tag-onmouseleave","tag-onmouseout","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44853"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=44853"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44853\/revisions"}],"predecessor-version":[{"id":44859,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44853\/revisions\/44859"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}