Value Binding with html elements in lightning Component

HTML Markup:

<a href="javascript:void(0)" onclick="{!c.onUserClick}" data-userid="{!AccountDetail.CreatedBy.Id}">
     {!AccountDetail.CreatedBy.Name}
</a>

Controller:

onUserClick : function(component,event,helper){
        var userId = event.currentTarget.getAttribute("data-userid");
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId" : userId,
        });
        navEvt.fire()
}