{"id":44747,"date":"2019-04-22T03:01:03","date_gmt":"2019-04-21T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44747"},"modified":"2019-04-21T18:31:18","modified_gmt":"2019-04-21T08:31:18","slug":"html-event-disrupters-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-event-disrupters-primer-tutorial\/","title":{"rendered":"HTML Event Disrupters Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<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; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-event-disrupters-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":[2397,400,576,2941,997,2786,2940,1319],"class_list":["post-44747","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-bubble","tag-event","tag-html","tag-preventdefault","tag-programming","tag-propagation","tag-stoppropagation","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44747"}],"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=44747"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44747\/revisions"}],"predecessor-version":[{"id":44756,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44747\/revisions\/44756"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}