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: 新連接，可以注冊監(jiān)聽
• sourceId: 連接的源元素id
• targetId: 連接的目標(biāo)元素id
• source: 連接的源元素
• target: 連接的目標(biāo)元素
• sourceEndpoint: 連接的源端點
• targetEndpoint: 連接的目標(biāo)端點

originalEvent：建立連接的原始鼠標(biāo)事件。
注： jsPlumb.connect或者鼠標(biāo)連線時觸發(fā)此事件

connectionDetached（info，originalEvent）- 通知連接斷開

info具有的屬性：

• connection: 已分離的連接
• sourceId: 分離之前連接的源元素id
• targetId: 分離之前連接的目標(biāo)元素id
• source: 分離之前連接的源元素
• target: 分離之前連接的目標(biāo)元素
• sourceEndpoint: 分離之前連接的源端點
• targetEndpoint: 分離之前連接的目標(biāo)端點

連接到某個節(jié)點之前放棄新拖動的Connection時不會觸發(fā)此事件，可以使用connectionAborted捕獲。

originalEvent：斷開連接的原始鼠標(biāo)事件。

connectionMoved（info，originalEvent）- 通知已將現(xiàn)有連接的源或目標(biāo)端點拖動到某個新位置

info具有的屬性：

• index: 源端點為0，目標(biāo)端點為1
• originalSourceId: 移動前連接的源元素id
• newSourceId: 移動后連接的源元素id
• originalTargetId: 移動前連接的目標(biāo)元素id
• newTargetId: 移動后連接的目標(biāo)元素id
• originalSourceEndpoint: 移動前的源端點
• newSourceEndpoint: 移動后的源端點
• originalTargetEndpoint: 移動前的目標(biāo)端點
• newTargetEndpoint: 移動后的目標(biāo)端點

connectionAborted（connection，originalEvent）在連接到端點或目標(biāo)元素之前放棄拖動連接時觸發(fā)

connectionDrag（connection）- 正在拖動現(xiàn)有連接

注：當(dāng)此事件觸發(fā)時，連接的目標(biāo)端點是jsPlumb用于拖動的瞬態(tài)元素，隨后在建立或中止連接時將從DOM中刪除。

connectionDragStop（connection）- 連接拖動結(jié)束

click（connection, originalEvent）- 單擊連接

dblclick（connection, originalEvent）- 雙擊連接

endpointClick（connection, originalEvent）- 單擊端點

endpointDblClick（connection, originalEvent）- 雙擊端點

contextmenu（connection, originalEvent）- 右鍵單擊某個給定組件jsPlumb將報告對Connections和Endpoints的右鍵單擊

beforeDrop（info）- 刪除新連接或現(xiàn)有連接時觸發(fā)此事件

info具有的屬性：

• index: 源端點為0，目標(biāo)端點為1
• sourceId: 連接的源元素id
• targetId: 連接的目標(biāo)元素id
• scope: 連接的范圍
• connection: 實際的Connection對象。可以訪問Connection中的“端點”數(shù)組，以獲取連接中涉及的端點，但注意，在拖動連接時，目標(biāo)端點將始終是僅在拖動的生命周期內(nèi)存在的瞬態(tài)端點。要獲取正在刪除的連接端點，請使用dropEndpoint。
• dropEndpoint: 這是刪除連接的實際端點?？赡転閚ull，因為如果在已調(diào)用makeTarget的元素上刪除Connection，則不會設(shè)置它
• targetEndpoint: 分離之前Connection中的目標(biāo)端點

beforeDetach（connection）- 斷開連接時觸發(fā)此事件。connection參數(shù)為剛斷開的Connection。如果此攔截器返回false將會中止連接斷開。

beforeDrag（connection）- 開始拖動新連接時觸發(fā)此事件。

• endpoint: 拖動連接的端點
• source: 端點所屬的源
• sourceId: 端點所屬的源ID

beforeDrag與其他攔截器的操作略有不同：從攔截器函數(shù)返回false將取消當(dāng)前拖動，也可以從攔截器返回一個對象，此對象將作為data被傳進(jìn)新連接的構(gòu)造函數(shù)中:

jsPlumbInstance.bind("beforeDrag", function(params) {
  return {
   foo:"bar"
  }
});

如果已定義參數(shù)化連接類型，此功能特別有用。使用此機(jī)制，可以使用選擇的數(shù)據(jù)填充新拖動的連接。
注: 1.7.6之前的所有jsPlumb版本，新的連接拖動以及拖動現(xiàn)有的連接都會觸發(fā)beforeDetach。從1.7.6開始，后一種行為已被移至 beforeStartDetach攔截器。

beforeStartDetach（connection）- 開始拖動現(xiàn)有連接時觸發(fā)此事件。

• 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) - 鼠標(biāo)放在連線上。
• mouseout(connection, originalEvent) - 鼠標(biāo)移出連線。
• mousedown(connection, originalEvent) - 連接上的鼠標(biāo)按鈕被按下。
• mouseup(connection, originalEvent) - 連接上的鼠標(biāo)按鈕被釋放。

端點事件

綁定到端點上的事件，使用以下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) - 鼠標(biāo)放在端點上。
• mouseout(endpoint, originalEvent) - 鼠標(biāo)移出端點。
• mousedown(endpoint, originalEvent) - 端點上的鼠標(biāo)按鈕被按下。
• mouseup(endpoint, originalEvent) - 端點上鼠標(biāo)按鈕被釋放。
• maxConnections(info, originalEvent) - 在已具有最大連接數(shù)的端點上刪除連接。
  info具有的屬性：
  • endpoint：刪除連線的端點
  • connection：刪除的連接
  • maxConnections：端點的maxConnections值

覆蓋事件

在Overlay上注冊事件偵聽器是一個稍微不同的過程 - 將它們作為Overlay構(gòu)造函數(shù)的參數(shù)。

以下是在Overlay上注冊點擊監(jiān)聽器的方法：

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方法刪除監(jiān)聽器。

//取消綁定事件
jsPlumb.unbind("click");

或者

//解除所有事件
var e = jsPlumb.addEndpoint("someDiv");
e.bind("click", function() { ... });
e.bind("dblclick", function() { ... });

...

e.unbind("click");

下一篇：拓?fù)鋱D編輯器-實現(xiàn)過程