# Events

Nestable fires a number of custom events that you 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 instance = new Nestable("#myList");

    instance.on('XXXX', fn);

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

    instance.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

    instance.on('stop', () => {
        counter.innerHTML = selected.length;
    });

### Correct

    const updateDisplay = () => {
        counter.innerHTML = selected.length;
    };

    // attach the event listener
    instance.on('stop', updateDisplay);

    // detach the event listener
    instance.off('stop', updateDisplay);

## Event reference

Event Name | Description
--- | ---
`init` | Fires when the instance is ready to be used.
`start` | Fired on mousedown / touchstart.
`move` | Fired on mousemove / touchmove.
`stop` | Fired on mouseup / touchend.
`nest` | Fired when an item is nested.
`unnest` | Fired when an item is unnested.
`reorder` | Fired when an item is reordered.
`error.maxdepth` | Fires when nesting is attemped when max nesting is already reached.
`error.disabled` | Fires when dropping or nesting is attemped in a disabled item.
`error.collapsed` | Fires when nesting is attemped in a collapsed item.
`error.confined` | Fires when attempting to move a confined item out of it's parent.

##### Events Demo

1. Item 1
2. Item 2
   1. Item 3
   2. Item 4
      1. Item 5
      2. Item 6
3. Item 7
4. Item 8
5. Item 9
   1. Item 10
   2. Item 11
6. Item 12

##### Events