拓扑图编辑器-jsplumb事件

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");

下一篇：拓扑图编辑器-实现过程