Hello! I'd like to get some opinions on what would be the "best" way of storing data on DOM elements.

My current example is for tracking clicks on links on my site. I want to mark up my links as pointing either internally/externally, and also noting the parent element so that I know where exactly on the site the link was clicked. I'd then write it all into some analytics.

Using HTML5 I could write:
<a href="http://jquery.com" data-location="outbound" data-linktype="myfavs">jQuery</a>

Using jQuery.data() I could write:
$(a).data({"data-location:"outbound","data-linktype","myfavs"});

The downside to the jQuery route that I can immediately see is the problem of event binding being lost if I'm not careful on when I bind my events. But on the flipside with the HTML5 route I have to parse those tags case by case into some Javascript variables anyway.

What are your thoughts? What if those HTML5 tags aren't in the source HTML, but are being added with jQuery onto each anchor?

Maybe I've misunderstood the purpose behind either or both of the implementations?

Thanks