javascript - Jquery Declarative way with HTML5 data-* -

would know way use jquery in declarative way?

some of tell me use angularjs isn't there more lightweight, view side (no need routing , complex features because i'm using symfony)

is there framework or library replace (i know it's bad practice it's example):

<button onclick="myfunction()">click me</button> 

by:

<any data-xx-event="click" data-xx-action="..."> </any> 

are trying register new html elements ?

extracted page :

goal :

<hangout-module>   <hangout-chat from="paul, addy">     <hangout-discussion>       <hangout-message from="paul" profile="profile.png"           profile="118075919496626375791" datetime="2013-07-17t12:02">         <p>feelin' web components thing.</p>         <p>heard of it?</p>       </hangout-message>     </hangout-discussion>   </hangout-chat>   <hangout-chat>...</hangout-chat> </hangout-module> 

some example author of page gives:

var xfooproto = object.create(htmlelement.prototype);  // 1. give x-foo foo() method. xfooproto.foo = function() {   alert('foo() called'); };  // 2. define property read-only "bar". object.defineproperty(xfooproto, "bar", {value: 5});  // 3. register x-foo's definition. var xfoo = document.registerelement('x-foo', {prototype: xfooproto});  // 4. instantiate x-foo. var xfoo = document.createelement('x-foo');  // 5. add page. document.body.appendchild(xfoo);