Events

Selectable fires a number of custom events that the end-user can listen for.

To do so the end-user 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('selectable.XXXX', fn);

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

selectable.off('selectable.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('selectable.end', (e, selected, unselected) => {
    counter.innerHTML = selected.length;
});

Correct

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

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

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

---

Event reference

• selectable.init
• selectable.start
• selectable.drag
• selectable.end
• selectable.select
• selectable.unselect
• selectable.update
• selectable.recalculate