# Events

Selectable fires a number of custom events that the instance can listen for.

You can attach a number of custom event listeners using the `on()` method and pass the event name and a callback as the first two arguments:

    const selectable = new Selectable();

    selectable.on('XXXX', fn);

Event listeners can be detached by calling the `off()` method with the same arguments:

    selectable.off('XXXX', fn);

Both the `on()` and `off()` methods function the same as the native `addEventListener` and `removeEventListener` methods respectively.

This means that in order to remove a custom event listener from the instance, you must pass the same function expression to the `off()` method as you did to the `on()` method - declared / anonymous functions cannot be removed.

### Incorrect

    selectable.on('end', (e, selected, unselected) => {
        counter.innerHTML = selected.length;
    });

### Correct

    const updateCounter = (e, selected, unselected) => {
        counter.innerHTML = selected.length;
    };

    // attach the event listener
    selectable.on('end', updateCounter);

    // detach the event listener
    selectable.off('end', updateCounter);

## Event reference

Name | Description
--- | ---
`addeditem` | Item was added to the instance.
`removeditem` | Item was remove from the instance.
`init` | Instance is ready to be used.
`start` | `mousedown` / `touchstart`.
`drag` | `mousemove` / `touchmove`.
`end` | `mouseup` / `touchend`.
`selecteditem` | Item was selected.
`deselecteditem` | Item was deselected.
`state` | State change.
`enabled` | Instance was enabled.
`disabled` | Instance was disabled.