Event-Handling

Event-Listener anhängen

Sie können jedem verfügbaren Event einen beliebigen benutzerdefinierten Handler hinzufügen. Verwenden Sie dazu die Methode diagram.events.on() mit den folgenden Parametern:

• name - (string) der Name des Events
• handler - (function) die Handler-Funktion

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

Sie können mehrere Handler an dasselbe Event anhängen, und alle werden ausgeführt. Wenn einige der Handler false zurückgeben, werden die zugehörigen Operationen blockiert. Event-Handler werden in der Reihenfolge verarbeitet, in der sie angehängt wurden.

Event-Listener trennen

Um Events zu trennen, verwenden Sie die Methode diagram.events.detach():

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

diagram.events.detach("CustomEvent");

Events aufrufen

Um Events aufzurufen, verwenden Sie die Methode diagram.events.fire().

diagram.events.fire("CustomEvent", args);
// wobei args ein Array von Argumenten ist

Normalerweise werden Events automatisch aufgerufen, und Sie müssen diese Methode nicht verwenden.

Liste der unterstützten Events

Diagram-Events

Sehen Sie sich die vollständige Liste der Diagram-API-Events in der API-Referenz an.

Editor-Events

Die Liste der Diagram-Editor-API-Events finden Sie im API-Abschnitt.

Hinweis

Zusätzlich zu den Events des Diagram-Editors können Sie auch Events des Diagram-Objekts verwenden, während Sie in der Editor-Ansicht arbeiten. Zum Beispiel:

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

Diese Methode können Sie auch verwenden, wenn Sie die unten aufgeführten Events anwenden möchten.

CellManager-Events

Sehen Sie sich die vollständige Liste der CellManager-API-Events in der API-Referenz an.

DataCollection-Events

Sehen Sie sich die vollständige Liste der DataCollection-API-Events in der API-Referenz an.

InlineEditor-Events

Sehen Sie sich die vollständige Liste der InlineEditor-API-Events in der API-Referenz an.

Selection-Events

Sehen Sie sich die vollständige Liste der Selection-API-Events in der API-Referenz an.