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('event_name', myCallback);

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

selectable.off('event_name', myCallback);

---

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', function(e, selected, unselected) {
    counter.value = selected.length;
});

Correct

const myCallback = function(e, selected, unselected) {
    counter.value = selected.length;
};

// add the event listener
selectable.on('end', myCallback);

// remove the event listener
selectable.off('end', myCallback);

---

Listening for an event once

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

Name	Description
init	The instance is ready.
destroyed	The instance has been destroyed
add	An item was added to the instance.
remove	An item was removed from the instance.
start	mousedown / touchstart.
drag	mousemove / touchmove.
end	mouseup / touchend.
select	An item was selected.
deselect	An item was deselected.
selecting	An item has been marked for selection.
deselecting	An item has been marked for deselection.
state	Save state change.
enabled	The instance was enabled.
disabled	The instance was disabled.