Events

Make your website interactive by handling DOM events with GreenLight

Listening to events

You can listen to events by using gl-on directive and specificing the DOM event name and the Controller event name you want to call.

<div gl-controller="ListenController">
  <button gl-on="click:alertButtonClicked">Alert</button>
</div>

<script>
  const Controller = GreenLight.controller("ListenController");

  Controller.on("alertButtonClicked", () => {
    alert("Yayyyy, it works!!!");
  });
</script>

As you can see, it works seamlessly and you don't need to worry about the DOM, only how it affects your state.