事件绑定/解绑

阅读时间约 2 分钟

graph.on(eventName, handler)

为图绑定事件监听。

参数

名称	类型	是否必选	描述
eventName	string	true	事件名，可选事件名参见 Event
handler	Function	true	监听函数

这里对 handler 的参数 evt 中 item 和 target 参数进行解释：

名称	类型	是否必选	描述
item	string	true	被操作的 item
target	Function	true	被操作的具体图形

用法

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

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

graph.off(eventName, handler)

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

参数

名称	类型	是否必选	描述
eventName	string	true	事件名，可选事件名参见 Event
handler	Function	true	监听函数

这里对 handler 的参数 evt 中 item 和 target 同 graph.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)

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

参数

名称	类型	是否必选	描述
eventName	string	true	事件名，可选事件名参见 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();