HTML Event Disrupters Primer Tutorial

HTML Event Disrupters Primer Tutorial

HTML Event Disrupters Primer Tutorial

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 “GOTO” fetishes with “well, all the error handling is GOTO anyway … so … there … ngah!”.

But has it grown up all that much? Think of all the “break” and “return” statement possibilities everywhere. The fact is, the optimists will start something off on the quite likely 99% success rate path of coding, and “break”/”return”/”GOTO” code for that other 1% of reality that still needs attention.

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’d never, to my recollection, used …

… and used not to know the former’s benefits. You see event.stopPropagation had always been what I’d imagined I’d want, on rare occasions (when I ended up rearranging arrangements so as not to need to “disrupt” in the first place). It stops “parent” HTML elements inheriting “child” event logics that “propagate” (some references use “bubbling”) up through the HTML hierarchy. For a while I’d given “event.preventDefault” those superhuman powers, silly me! But I’m right with it now.

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 …

  • a need to “geographically sit” within the confines of that table … but …
  • that button’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

To better show you what we mean, we wrote a proof of concept web application called stopPropagation_preventDefault.html that you can try with this live run link.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>