examples/events.html

<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
    <meta charset="utf-8">
  </head>
  <body>
    <template data-tagname="say-hello">
      <button onclick="sayHello(name)">click me</button>
    </template>
        
    <say-hello></say-hello>

    <script src="../build/magery-compiler.min.js"></script>
    <script src="../build/magery-runtime.min.js"></script>
    <script>

     var components = MageryCompiler.compile('template');
     var target = document.querySelector('say-hello');

     var data = {
         name: 'testing'
     };

     // handlers for template
     var handlers = {
         sayHello: function (name) {
             alert('Hello, ' + name + '!');
         }
     };

     // events are bound on first patch
     components['say-hello'](target, data, handlers);

    </script>
  </body>
</html>