Skip to main content

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.

JsPlumbInstance#

ConstantNamePayloadDescription
EVENT_ZOOMzoomcurrentZoom:numberFired whenever the zoom is changed via setZoom(..)
EVENT_CONTAINER_CHANGEcontainer:changecontainer:ElementFired whenever the underlying container changes.
EVENT_CONNECTION_MOVEDconnection:moveparams:ConnectionMovedParamsFired whenever a connection's target or source is changed, either programmatically or via the mouse.
EVENT_CONNECTION_DETACHEDconnection:detachparams:ConnectionDetachedParamsFired when a connection is detached, either programmatically or via the mouse
EVENT_MANAGE_ELEMENTmanageElementparams:{el:Element}Fired when a jsPlumb instance starts to manage an element
EVENT_UNMANAGE_ELEMENTunmanageElementparams:{el:Element}Fired when a jsPlumb instance stops managing some element
EVENT_CONNECTIONconnectionparams:ConnectionEstablishedParamsFired when a connection is established
EVENT_ENDPOINT_REPLACEDendpoint:replacedparams:{previous:Endpoint, current:Endpoint}Fired when some endpoint in a connection is replaced with a different endpoint.
EVENT_GROUP_ADDEDgroup:addparams:{group:UIGroup}fired when a new group is added
EVENT_GROUP_REMOVEDgroup:removeparams:{group:UIGroup}fired when a group is removed
EVENT_GROUP_COLLAPSEgroup:collapseparams:{group:UIGroup})Fired when a group is collapsed
EVENT_GROUP_EXPANDgroup:expandparams:{group:UIGroup}Fired when a group is expanded
EVENT_GROUP_MEMBER_ADDEDgroup:addMemberparams:{group:UIGroup, el:Element, pos:PointXY, sourceGroup?:UIGroup}Fired when a new member is a added to a group
EVENT_GROUP_MEMBER_REMOVEDgroup:removeMemberparams:{group:UIGroup, el:Element, targetGroup?:UIGroup}Fired when a member is removed from a group
EVENT_NESTED_GROUP_ADDEDnestedGroupAddedparams:{parent:UIGroup, child:UIGroup}Fired when a group is added as a child to some other group
EVENT_NESTED_GROUP_REMOVEDnestedGroupRemovedparams:{parent:UIGroup, child:UIGroup}Fired when a nested group is removed from some group
EVENT_CONNECTION_CLICKclickconnection:ConnectionFired when the user clicks on a connection.
EVENT_CONNECTION_DBL_CLICKdblclickconnection:ConnectionFired when the user double clicks on a connection.
EVENT_CONNECTION_TAPtapconnection:ConnectionFired 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_TAPdbltapconnection:ConnectionFired when the user double taps on a connection.
EVENT_CONNECTION_MOUSEOVERmouseoverconnection:ConnectionFired continuously when the mouse pointer is over a connection's element
EVENT_CONNECTION_MOUSEOUTmouseoutconnection:ConnectionFired when the mouse pointer exits a connection's element
EVENT_ENDPOINT_CLICKclickendpoint:EndpointFired when the user clicks on an endpoint.
EVENT_ENDPOINT_DBL_CLICKdblclickendpoint:EndpointFired when the user double clicks on an endpoint.
EVENT_ENDPOINT_TAPtapendpoint:EndpointFired 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_TAPdbltapendpoint:EndpointFired when the user double taps on an endpoint.
EVENT_ENDPOINT_MOUSEOVERmouseoverendpoint:EndpointFired continuously when the mouse pointer is over an endpoint's element
EVENT_ENDPOINT_MOUSEOUTmouseoutendpoint:EndpointFired when the mouse pointer exits an endpoint's element
EVENT_ELEMENT_CLICKclickelement:ElementFired when the user clicks on a managed element.
EVENT_ELEMENT_DBL_CLICKdblclickelement:ElementFired when the user double clicks on a managed element.
EVENT_ELEMENT_TAPtapelement:ElementFired 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_TAPdbltapelement:ElementFired when the user double taps on a managed element.
EVENT_ELEMENT_MOUSEOVERmouseoverelement:ElementFired continuously when the mouse pointer is over a managed element's element
EVENT_ELEMENT_MOUSEOUTmouseoutelement:ElementFired 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).

ConstantNamePayloadDescription
EVENT_CLICKclickconnection:ConnectionFired when the user clicks on a connection.
EVENT_DBL_CLICKdblclickconnection:ConnectionFired when the user double clicks on a connection.
EVENT_TAPtapconnection:ConnectionFired when the user taps on a connection
EVENT_DBL_TAPdbltapconnection:ConnectionFired when the user double taps on a connection.

Endpoint#

ConstantNamePayloadDescription
EVENT_CLICKclickendpoint:EndpointFired when the user clicks on an endpoint.
EVENT_DBL_CLICKdblclickendpoint:EndpointFired when the user double clicks on an endpoint.
EVENT_TAPtapendpoint:EndpointFired when the user taps on an endpoint
EVENT_DBL_TAPdbltapendpoint:EndpointFired when the user double taps on an endpoint.
EVENT_ANCHOR_CHANGEDanchor:changedparams:{endpoint:Endpoint, anchor:Anchor}Fired when an endpoint's anchor changes.

Overlay#

ConstantNamePayloadDescription
EVENT_CLICKclickn/aFired when the user clicks on an overlay.
EVENT_DBL_CLICKdblclickn/aFired when the user double clicks on an overlay.
EVENT_TAPtapn/aFired when the user taps on an overlay.
EVENT_DBL_TAPdbltapn/aFired 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