Events

Introduction

The events object of a Wafer component defines the events that should be attached to elements in the template. Similarly to props the events object uses CSS selectors to identify the element(s) to attach the events to, with each selector then associated with one or more event names and the corresponding function that should be called.

class MyExample extends Wafer {
  get events() {
    return {
      // selector
      $button: {
        // object of event name -> function
        click: function () {
          this.count++;
        },
      },
    };
  }
}

The same rules for selectors apply as for the targets object on props.

By default the function is bound to the component, and the event listener is passed an empty options {} object.

Alternatively the event can be defined as an object where the function, event target and listener options can all be explicitly set:

class MyExample extends Wafer {
  get events() {
    return {
      // selector
      $button: {
        // object of event name -> function options
        click: {
          fn: function () {
            this.count++;
          },
          // bind function to target
          target: this,
          // pass custom options
          opts: {
            once: true,
          },
        },
      },
    };
  }
}