Handle Events

The Graphane templating would enable the creation of interactive SVG graphics by supporting event handling. Developers could attach event listeners to SVG elements and respond to user interactions, such as clicks, hovers, or touches. g-on (or the shorthand @): attach an event listener to the element.

The g-on expression must be a function reference, a function call or a direct expression. In this example displays a message when the rectangle is clicked.

Commonly we use <script type="method"></script> for add methods to the template component. This script includes functions than can be used as expressions in g-on directive. Please see the methods section for more information.

In the SVG format, the text is not included inside other elements, is displayed over other elements. For this reason, in this example, the event handler is created in the rect and text elements.