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
add An item was added to the instance.
remove An item was removed from the instance.
init Instance is ready to be used.
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.
state State change.
enabled Instance was enabled.
disabled Instance was disabled.