Unobtrusive JS suggests that we don't have any onclick attributes in our HTML templates.
<a href="/controller/foo/1">View Foo 1</a>
A most basic progressive enhancement is
to convert an that anchor tag
to use XHR
to retrieve a DOM fragment. So, I write JS
to add an event listener for a."click" then make an XHR
to a.href.
Alas, the browser still wants
to navigate
to "/controller/foo". So, I write JS
to dynamically inject a.onclick = "return false;". Still unobtrusive (I guess), but now I'm paying the the cost of an extra event handler.
To avoid the cost of 2 event listeners, I could shove my function call into the onclick attribute
<a href="/controller/foo/1" onclick="myXHRFcn(); return false;">
But that's grodo for all sorts of reasons.
To make it more interesting, I might have 100 anchor tags that I want
to enhance. A better pattern is a single listener on a parent node that relies on event bubbling. That's cool, but
how do I short circuit the browser from navigating
to the URL without this on every anchor node?
onclick="return false;"
Manipulating the href is not an option. It must stay intact so the context menu options
to copy or open in new page work as expected.
