事件绑定/解绑

阅读时间约 2 分钟

graph.on(eventName, handler)

为图绑定事件监听。

参数

名称类型是否必选描述
eventNamestringtrue事件名,可选事件名参见 Event
handlerFunctiontrue监听函数

这里对 handler 的参数 evtitemtarget 参数进行解释:

名称类型是否必选描述
itemstringtrue被操作的 item
targetFunctiontrue被操作的具体图形

用法

// 为图上的所有节点绑定点击监听
graph.on('node:tap', (evt) => {
  const item = evt.item; // 被操作的节点 item
  const target = evt.target; // 被操作的具体图形
  // ...
});

// 为画布绑定点击监听
graph.on('click', (evt) => {
  // ...
});

graph.off(eventName, handler)

为图解除指定的事件监听。

参数

名称类型是否必选描述
eventNamestringtrue事件名,可选事件名参见 Event
handlerFunctiontrue监听函数

这里对 handler 的参数 evtitemtargetgraph.on(eventName, handler)。该 handler 必须与绑定该事件的 handler 是同一对象。

用法

// 监听函数
const fn = (evt) => {
  const item = evt.item; // 被操作的节点 item
  const target = evt.target; // 被操作的具体图形
  // ...
};
// 为图上的所有节点绑定点击监听
graph.on('node:tap', fn);

// 解除上面的点击监听事件,注意 fn 必须是同一个对象
graph.off('node:tap', fn);

graph.off(eventName)

为图解除某事件的所有监听。

参数

名称类型是否必选描述
eventNamestringtrue事件名,可选事件名参见 Event

用法

// 监听函数
const fn1 = (evt) => {
  const item = evt.item; // 被操作的节点 item
  const target = evt.target; // 被操作的具体图形
  // ...
};
const fn2 = (evt) => {
  // ...
};
// 为图上的所有节点绑定点击监听
graph.on('node:tap', fn1);
graph.on('node:tap', fn2);

// 解除上面的所有节点点击监听事件
graph.off('node:tap');

graph.off()

为图解除所有监听。该函数无参数。

用法

// 监听函数
const fn1 = (evt) => {
  // ...
};
const fn2 = (evt) => {
  // ...
};
// 为图上的所有节点绑定点击监听
graph.on('node:tap', fn1);
graph.on('afteranimate', fn2);

// 解除图上所有监听事件
graph.off();