Events
A number of different events are fired by jsPlumb. On this page we break them down by class. For each event we list its constant, which is the name of the constant exported by jsPlumb, its name, which is the actual name of the event, the payload that is fired with the event, and a brief description. For some events we link to the appropriate location in the api documentation.
You may also be interested in the Interceptors page - interceptors are events from which you can return values that affect what jsPlumb does next, for instance preventing the detachment of a connection, or preventing a connection from being dropped.
For events fired by elements being dragged, see the Element dragging page.
JsPlumbInstance#
| Constant | Name | Payload | Description |
|---|---|---|---|
| EVENT_ZOOM | zoom | currentZoom:number | Fired whenever the zoom is changed via setZoom(..) |
| EVENT_CONTAINER_CHANGE | container:change | container:Element | Fired whenever the underlying container changes. |
| EVENT_CONNECTION_MOVED | connection:move | params:ConnectionMovedParams | Fired whenever a connection's target or source is changed, either programmatically or via the mouse. |
| EVENT_CONNECTION_DETACHED | connection:detach | params:ConnectionDetachedParams | Fired when a connection is detached, either programmatically or via the mouse |
| EVENT_MANAGE_ELEMENT | manageElement | params:{el:Element} | Fired when a jsPlumb instance starts to manage an element |
| EVENT_UNMANAGE_ELEMENT | unmanageElement | params:{el:Element} | Fired when a jsPlumb instance stops managing some element |
| EVENT_CONNECTION | connection | params:ConnectionEstablishedParams | Fired when a connection is established |
| EVENT_ENDPOINT_REPLACED | endpoint:replaced | params:{previous:Endpoint, current:Endpoint} | Fired when some endpoint in a connection is replaced with a different endpoint. |
| EVENT_GROUP_ADDED | group:add | params:{group:UIGroup} | fired when a new group is added |
| EVENT_GROUP_REMOVED | group:remove | params:{group:UIGroup} | fired when a group is removed |
| EVENT_GROUP_COLLAPSE | group:collapse | params:{group:UIGroup}) | Fired when a group is collapsed |
| EVENT_GROUP_EXPAND | group:expand | params:{group:UIGroup} | Fired when a group is expanded |
| EVENT_GROUP_MEMBER_ADDED | group:addMember | params:{group:UIGroup, el:Element, pos:PointXY, sourceGroup?:UIGroup} | Fired when a new member is a added to a group |
| EVENT_GROUP_MEMBER_REMOVED | group:removeMember | params:{group:UIGroup, el:Element, targetGroup?:UIGroup} | Fired when a member is removed from a group |
| EVENT_NESTED_GROUP_ADDED | nestedGroupAdded | params:{parent:UIGroup, child:UIGroup} | Fired when a group is added as a child to some other group |
| EVENT_NESTED_GROUP_REMOVED | nestedGroupRemoved | params:{parent:UIGroup, child:UIGroup} | Fired when a nested group is removed from some group |
| EVENT_CONNECTION_CLICK | click | connection:Connection | Fired when the user clicks on a connection. |
| EVENT_CONNECTION_DBL_CLICK | dblclick | connection:Connection | Fired when the user double clicks on a connection. |
| EVENT_CONNECTION_TAP | tap | connection:Connection | Fired when the user taps on a connection. On devices that have a mouse, tap is a synthesized event that, unlike click, will not fire if the element on which the event has occurred has moved during the period that the mouse button was held down. On touch devices, this is a native tap event |
| EVENT_CONNECTION_DBL_TAP | dbltap | connection:Connection | Fired when the user double taps on a connection. |
| EVENT_CONNECTION_MOUSEOVER | mouseover | connection:Connection | Fired continuously when the mouse pointer is over a connection's element |
| EVENT_CONNECTION_MOUSEOUT | mouseout | connection:Connection | Fired when the mouse pointer exits a connection's element |
| EVENT_ENDPOINT_CLICK | click | endpoint:Endpoint | Fired when the user clicks on an endpoint. |
| EVENT_ENDPOINT_DBL_CLICK | dblclick | endpoint:Endpoint | Fired when the user double clicks on an endpoint. |
| EVENT_ENDPOINT_TAP | tap | endpoint:Endpoint | Fired when the user taps on an endpoint. On devices that have a mouse, tap is a synthesized event that, unlike click, will not fire if the element on which the event has occurred has moved during the period that the mouse button was held down. On touch devices, this is a native tap event |
| EVENT_ENDPOINT_DBL_TAP | dbltap | endpoint:Endpoint | Fired when the user double taps on an endpoint. |
| EVENT_ENDPOINT_MOUSEOVER | mouseover | endpoint:Endpoint | Fired continuously when the mouse pointer is over an endpoint's element |
| EVENT_ENDPOINT_MOUSEOUT | mouseout | endpoint:Endpoint | Fired when the mouse pointer exits an endpoint's element |
| EVENT_ELEMENT_CLICK | click | element:Element | Fired when the user clicks on a managed element. |
| EVENT_ELEMENT_DBL_CLICK | dblclick | element:Element | Fired when the user double clicks on a managed element. |
| EVENT_ELEMENT_TAP | tap | element:Element | Fired when the user taps on a managed element. On devices that have a mouse, tap is a synthesized event that, unlike click, will not fire if the element on which the event has occurred has moved during the period that the mouse button was held down. On touch devices, this is a native tap event |
| EVENT_ELEMENT_DBL_TAP | dbltap | element:Element | Fired when the user double taps on a managed element. |
| EVENT_ELEMENT_MOUSEOVER | mouseover | element:Element | Fired continuously when the mouse pointer is over a managed element's element |
| EVENT_ELEMENT_MOUSEOUT | mouseout | element:Element | Fired when the mouse pointer exits a managed element's element |
Connection#
You can bind to connection events directly on a jsPlumb instance, but you can also bind to events on a one-to-one basis on a Connection object (such as is returned from the connect(..) method of a jsPlumb instance).
| Constant | Name | Payload | Description |
|---|---|---|---|
| EVENT_CLICK | click | connection:Connection | Fired when the user clicks on a connection. |
| EVENT_DBL_CLICK | dblclick | connection:Connection | Fired when the user double clicks on a connection. |
| EVENT_TAP | tap | connection:Connection | Fired when the user taps on a connection |
| EVENT_DBL_TAP | dbltap | connection:Connection | Fired when the user double taps on a connection. |
Endpoint#
| Constant | Name | Payload | Description |
|---|---|---|---|
| EVENT_CLICK | click | endpoint:Endpoint | Fired when the user clicks on an endpoint. |
| EVENT_DBL_CLICK | dblclick | endpoint:Endpoint | Fired when the user double clicks on an endpoint. |
| EVENT_TAP | tap | endpoint:Endpoint | Fired when the user taps on an endpoint |
| EVENT_DBL_TAP | dbltap | endpoint:Endpoint | Fired when the user double taps on an endpoint. |
| EVENT_ANCHOR_CHANGED | anchor:changed | params:{endpoint:Endpoint, anchor:Anchor} | Fired when an endpoint's anchor changes. |
Overlay#
| Constant | Name | Payload | Description |
|---|---|---|---|
| EVENT_CLICK | click | n/a | Fired when the user clicks on an overlay. |
| EVENT_DBL_CLICK | dblclick | n/a | Fired when the user double clicks on an overlay. |
| EVENT_TAP | tap | n/a | Fired when the user taps on an overlay. |
| EVENT_DBL_TAP | dbltap | n/a | Fired when the user double taps on an overlay. |
note
Although it is possible to bind to these events on an overlay, in practise what you will more likely do is declare event handlers for a given overlay when you declare it either in the defaults, or a connect(..), addEndpoint(..) or addSourceSelector(..) call. For more information on declaring event handlers for overlays, see the overlays documentation