# 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()`](https://mobius1.github.io/Selectable/api/methods/on.html) method and pass the event name and a callback as the first two arguments:

```javascript
const selectable = new Selectable();

selectable.on('event_name', myCallback);
```

Event listeners can be detached by calling the [`off()`](https://mobius1.github.io/Selectable/api/methods/off.html) method with the same arguments:

```javascript
selectable.off('event_name', myCallback);
```

***

{% hint style="info" %}
Both the `on()` and `off()` methods function the same as the native [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) methods respectively.

This means that in order to remove a custom event listener from the instance, you must pass the same [function expression](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function) to the `off()` method as you did to the `on()` method - [declared / anonymous functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) cannot be removed.
{% endhint %}

#### Incorrect <a href="#incorrect" id="incorrect"></a>

```javascript
selectable.on('end', function(e, selected, unselected) {
    counter.value = selected.length;
});
```

#### Correct <a href="#correct" id="correct"></a>

<pre class="language-javascript"><code class="lang-javascript">const myCallback = function(e, selected, unselected) {
    counter.value = selected.length;
<strong>};
</strong>
// add the event listener
selectable.on('end', myCallback);

// remove the event listener
selectable.off('end', myCallback);
</code></pre>

***

### Listening for an event once

```javascript
const myCallback = function(e, selected, unselected) {
    // Do something once

    // Remove the event listener
    this.off('select', myCallback);
};

// Add the event listener
selectable.on('select', myCallback);
```

### Event reference <a href="#eventreference" id="eventreference"></a>

| Name                                                                                 | Description                              |
| ------------------------------------------------------------------------------------ | ---------------------------------------- |
| [`init`](https://mobius-studios.gitbook.io/selectable/api/events/init)               | The instance is ready.                   |
| [`destroyed`](https://mobius-studios.gitbook.io/selectable/api/events/destroyed)     | The instance has been destroyed          |
| [`add`](https://mobius-studios.gitbook.io/selectable/api/events/add)                 | An item was added to the instance.       |
| [`remove`](https://mobius-studios.gitbook.io/selectable/api/events/remove)           | An item was removed from the instance.   |
| [`start`](https://mobius-studios.gitbook.io/selectable/api/events/start)             | `mousedown` / `touchstart`.              |
| [`drag`](https://mobius-studios.gitbook.io/selectable/api/events/drag)               | `mousemove` / `touchmove`.               |
| [`end`](https://mobius-studios.gitbook.io/selectable/api/events/end)                 | `mouseup` / `touchend`.                  |
| [`select`](https://mobius-studios.gitbook.io/selectable/api/events/select)           | An item was selected.                    |
| [`deselect`](https://mobius-studios.gitbook.io/selectable/api/events/deselect)       | An item was deselected.                  |
| [`selecting`](https://mobius-studios.gitbook.io/selectable/api/events/selecting)     | An item has been marked for selection.   |
| [`deselecting`](https://mobius-studios.gitbook.io/selectable/api/events/deselecting) | An item has been marked for deselection. |
| [`state`](https://mobius-studios.gitbook.io/selectable/api/events/state)             | Save state change.                       |
| [`enabled`](https://mobius-studios.gitbook.io/selectable/api/events/enabled)         | The instance was enabled.                |
| [`disabled`](https://mobius-studios.gitbook.io/selectable/api/events/disabled)       | The instance was disabled.               |