jsPlumb支持绑定到Connections，Endpoints和Overlays上的几个不同事件，以及jsPlumb对象本身。
jsPlumb事件
要在jsPlumb本身（或jsPlumb实例）上绑定事件，请使用jsPlumb.bind(event, callback)
jsPlumb.bind("connection", function(info) {
.. update your model in here, maybe.
});
可以在jsPlumb类上绑定的事件：
connection（info, originalEvent）- 通知连接建立
info具有的属性：
-
connection: 新连接，可以注册监听 -
sourceId: 连接的源元素id -
targetId: 连接的目标元素id -
source: 连接的源元素 -
target: 连接的目标元素 -
sourceEndpoint: 连接的源端点 -
targetEndpoint: 连接的目标端点
originalEvent：建立连接的原始鼠标事件。
注： jsPlumb.connect或者鼠标连线时触发此事件
connectionDetached（info，originalEvent）- 通知连接断开
info具有的属性：
-
connection: 已分离的连接 -
sourceId: 分离之前连接的源元素id -
targetId: 分离之前连接的目标元素id -
source: 分离之前连接的源元素 -
target: 分离之前连接的目标元素 -
sourceEndpoint: 分离之前连接的源端点 -
targetEndpoint: 分离之前连接的目标端点
连接到某个节点之前放弃新拖动的Connection时不会触发此事件，可以使用connectionAborted捕获。
originalEvent：断开连接的原始鼠标事件。
connectionMoved（info，originalEvent）- 通知已将现有连接的源或目标端点拖动到某个新位置
info具有的属性：
-
index: 源端点为0，目标端点为1 -
originalSourceId: 移动前连接的源元素id -
newSourceId: 移动后连接的源元素id -
originalTargetId: 移动前连接的目标元素id -
newTargetId: 移动后连接的目标元素id -
originalSourceEndpoint: 移动前的源端点 -
newSourceEndpoint: 移动后的源端点 -
originalTargetEndpoint: 移动前的目标端点 -
newTargetEndpoint: 移动后的目标端点
connectionAborted（connection，originalEvent）在连接到端点或目标元素之前放弃拖动连接时触发
connectionDrag（connection）- 正在拖动现有连接
注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。
connectionDragStop（connection）- 连接拖动结束
click（connection, originalEvent）- 单击连接
dblclick（connection, originalEvent）- 双击连接
endpointClick（connection, originalEvent）- 单击端点
endpointDblClick（connection, originalEvent）- 双击端点
contextmenu（connection, originalEvent）- 右键单击某个给定组件jsPlumb将报告对Connections和Endpoints的右键单击
beforeDrop（info）- 删除新连接或现有连接时触发此事件
info具有的属性：
-
index: 源端点为0，目标端点为1 -
sourceId: 连接的源元素id -
targetId: 连接的目标元素id -
scope: 连接的范围 -
connection: 实际的Connection对象。可以访问Connection中的“端点”数组，以获取连接中涉及的端点，但注意，在拖动连接时，目标端点将始终是仅在拖动的生命周期内存在的瞬态端点。要获取正在删除的连接端点，请使用dropEndpoint。 -
dropEndpoint: 这是删除连接的实际端点。可能为null，因为如果在已调用makeTarget的元素上删除Connection，则不会设置它 -
targetEndpoint: 分离之前Connection中的目标端点
beforeDetach（connection）- 断开连接时触发此事件。connection参数为刚断开的Connection。如果此拦截器返回false将会中止连接断开。
beforeDrag（connection）- 开始拖动新连接时触发此事件。
-
endpoint: 拖动连接的端点 -
source: 端点所属的源 -
sourceId: 端点所属的源ID
beforeDrag与其他拦截器的操作略有不同：从拦截器函数返回false将取消当前拖动，也可以从拦截器返回一个对象，此对象将作为data被传进新连接的构造函数中:
jsPlumbInstance.bind("beforeDrag", function(params) {
return {
foo:"bar"
}
});
如果已定义参数化连接类型，此功能特别有用。使用此机制，可以使用选择的数据填充新拖动的连接。
注: 1.7.6之前的所有jsPlumb版本，新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始，后一种行为已被移至 beforeStartDetach拦截器。
beforeStartDetach（connection）- 开始拖动现有连接时触发此事件。
-
endpoint: 拖动连接的端点 -
source: 端点所属的源 -
sourceId: 端点所属的源ID -
connection: 即将被拖动的连接
返回false，取消拖动。
连接事件
绑定到Connection上的事件，还可以使用以下bind方法：
var connection = jsPlumb.connect({source:"d1", target:"d2"});
connection.bind("click", function(conn) {
console.log("you clicked on ", conn);
});
这些是可以绑定到连线事件：
-
click(connection, originalEvent)- 单击连接。 -
dblclick(connection, originalEvent)- 双击连接。 -
contextmenu(connection, originalEvent)- 右键单击连线。 -
mouseover(connection, originalEvent)- 鼠标放在连线上。 -
mouseout(connection, originalEvent)- 鼠标移出连线。 -
mousedown(connection, originalEvent)- 连接上的鼠标按钮被按下。 -
mouseup(connection, originalEvent)- 连接上的鼠标按钮被释放。
端点事件
绑定到端点上的事件，使用以下bind方法：
var endpoint = jsPlumb.addEndpoint("d1", { someOptions } );
endpoint.bind("click", function(endpoint) {
console.log("you clicked on ", endpoint);
});
这些是可以绑定到端点的事件：
-
click(endpoint, originalEvent)- 单击端点。 -
dblclick(endpoint, originalEvent)- 双击端点。 -
contextmenu(endpoint, originalEvent)- 右键单击端点。 -
mouseover(endpoint, originalEvent)- 鼠标放在端点上。 -
mouseout(endpoint, originalEvent)- 鼠标移出端点。 -
mousedown(endpoint, originalEvent)- 端点上的鼠标按钮被按下。 -
mouseup(endpoint, originalEvent)- 端点上鼠标按钮被释放。 -
maxConnections(info, originalEvent)- 在已具有最大连接数的端点上删除连接。
info具有的属性：- endpoint：删除连线的端点
- connection：删除的连接
- maxConnections：端点的maxConnections值
覆盖事件
在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。
以下是在Overlay上注册点击监听器的方法：
jsPlumb.connect({
source:"el1",
target:"el2",
overlays:[
[ "Label", {
events:{
click:function(labelOverlay, originalEvent) {
console.log("click on label overlay for :" + labelOverlay.component);
}
}
}],
[ "Diamond", {
events:{
dblclick:function(diamondOverlay, originalEvent) {
console.log("double click on diamond overlay for : " + diamondOverlay.component);
}
}
}]
]
});
解除绑定事件
在jsPlumb对象以及Connections和Endpoints上，可以使用unbind方法删除监听器。
//取消绑定事件
jsPlumb.unbind("click");
或者
//解除所有事件
var e = jsPlumb.addEndpoint("someDiv");
e.bind("click", function() { ... });
e.bind("dblclick", function() { ... });
...
e.unbind("click");
下一篇：拓扑图编辑器-实现过程
