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 |
---|---|
addeditem |
Item was added to the instance. |
removeditem |
Item was remove from the instance. |
init |
Instance is ready to be used. |
start |
mousedown / touchstart . |
drag |
mousemove / touchmove . |
end |
mouseup / touchend . |
selecteditem |
Item was selected. |
deselecteditem |
Item was deselected. |
state |
State change. |
enabled |
Instance was enabled. |
disabled |
Instance was disabled. |