跳到主要内容

事件处理

添加事件监听器

您可以为任何可用事件添加自定义处理程序。为此,请使用 diagram.events.on() 方法,并传入以下参数:

  • name - (string) 事件名称
  • handler - (function) 处理函数
diagram.events.on("ShapeClick", (id) => {
alert("You've just clicked an item with id="+id);
});

您可以为同一事件添加多个处理程序,所有处理程序都会被执行。如果其中某个处理程序返回 false,相关操作将被阻止。事件处理程序按照添加的顺序依次执行。

移除事件监听器

要移除事件,请使用 diagram.events.detach() 方法:

diagram.events.on("CustomEvent", args);

diagram.events.detach("CustomEvent");

调用事件

要调用事件,请使用 diagram.events.fire() 方法。

diagram.events.fire("CustomEvent", args);
// 其中 args 是一个参数数组

通常情况下,事件会自动调用,您无需使用此方法。

支持的事件列表

Diagram 事件

请在 API 参考中查看完整的 Diagram API 事件列表。

Editor 事件

Diagram Editor 的 API 事件列表见 API 章节

备注

除了 Diagram Editor 的事件外,在编辑器视图中工作时,您还可以应用 Diagram 对象的事件。例如:

const editor = new dhx.DiagramEditor("editor_container", {
controls: { autoLayout: false }
});
editor.parse(data);

editor.diagram.events.on("ShapeClick", (id) => {
alert("You've just clicked an item with id=" + id);
});

如果您需要应用下面列出的事件,也可以使用这种方式。

CellManager 事件

请在 API 参考中查看完整的 CellManager API 事件列表。

DataCollection 事件

请在 API 参考中查看完整的 DataCollection API 事件列表。

InlineEditor 事件

请在 API 参考中查看完整的 InlineEditor API 事件列表。

Selection 事件

请在 API 参考中查看完整的 Selection API 事件列表。