CustomEvent

Some of our components dispatch custom events. These events are like regular DOM events and are compatible with all JavaScript frameworks that support those. For example, Vue.js templates bind the standard click event like this <button v-on:click="...">. It's the same with custom events <s-tabs v-on:s-select="...">.

The CustomEvent interface inherits from Event, so all the usual event properties like target still apply, but for all intents and purposes you'll just need to know the event type and detail.

Event type

All of our custom event types have an "s-" prefix. Select and Tabs, for example, both dispatch an s-select event. Event type is documented under "Name" in components' Event table in their API section.

Event detail

Some events pass a value back to listeners. This value is found on the detail property of the event object, e.g. e.detail. Although the value can be of any type, all components set this to an object so additions are non-breaking. Event detail is documented under "Detail" in components' Event table in their API section.

Examples

Date picker select handler with vanilla JavaScript

  
    const datepickerElement = document.querySelector('s-datepicker');
    datepickerElement.addEventListener('s-select', function(e) {
      console.log(e.type); // "s-select"
      console.log(e.detail); // {value: 'isoDate', inputId: 'id of the date picker's input'}
    });
  

Datepicker select handler with Vue.js

  
    <s-datepicker v-on:s-select="handleDateSelect"></s-datepicker>

    <script>
      export default {
        methods: {
          handleDateSelect: function(e) {
            console.log(e.type); // "s-select"
            console.log(e.detail); // {value: 'isoDate', inputId: 'id of the date picker's input'}
          }
        }
      }
    </script>
  

Datepicker select handler with Angular

  
    <s-datepicker (s-select)="handleDateSelect()">

    export class {
      handleDateSelect(e) {
        console.log(e.type); // "s-select"
        console.log(e.detail); // {value: 'isoDate', inputId: 'id of the date picker's input'}
      }
    }
  

Datepicker select handler with Ember

  
    // datepicker.hbs
      <s-datepicker {{on "s-select" this.handleDateSelect}}></s-datepicker>

    // datepicker.js
    @action 
    handleDateSelect(e) {
      console.log(e.type); // "s-select"
      console.log(e.detail); // {value: 'isoDate', inputId: 'id of the date picker's input'}
    }
  

Datepicker select handler with React

  
    function handleDateSelect(e) {
      console.log(e.type); // "s-select"
      console.log(e.detail); // {value: 'isoDate', inputId: 'id of the date picker's input'}
    }

    <Datepicker onSSelect={handleDateSelect} />