五、Bpmnjs-Modeler事件总栈-eventBus

目录

一、前言

二、eventBus的作用

三、常用事件类型

四、使用场景

五、总结

---

一、前言

        在上一章我们初步讲解了Modeler，并加载了一个简单的流程。在流程设计完成之后，我想点击一个任务节点（UserTask）或者连接线，如何触发他们的点击事件，进行查看元素基本信息或者进行个性化设计？这里就需要用到modeler中的另一个组件eventBus。

二、eventBus的作用

        在bpmnjs中有自己的事件系统，如果直接modeler.on进行绑定事件，bpmnjs是无法解析与执行的，需要通过eventBus进行监听。任何元素，包括画布，都可以通过eventBus.on监听来实现事件触发。

        我们在上一章的代码中，增加一个对流程元素（节点、连接线、网关等）的点击时的监听事件，来看下eventBus是如何设置与使用的。

modeler.get('eventBus').on('element.click', function(event) {
     console.log('元素被点击:', event);
});

点击效果：

        通过控制台的输出，我们看到，当我们点击任务节点的时候，触发了该节点的click事件，eventBus并获取到了该元素的基本信息，说明事件绑定成功了。

三、常用事件类型

        通过代码我们发现，eventBus的使用语法为：eventBus.on(‘事件名’，回调函数)，我们触发流程元素使用的是element.click事件，element.xxx事件是eventBus所有事件中的其中一种，主要用于流程元素交互，除了click事件之外，还有dbclick（双击事件）、mousedown（鼠标按下）等。除了流程元素交互相关的事件，还有画布相关的事件（canvas）以及流程模型变更事件（commandStack）等。由于bmpnjs中内置的事件特别多，下面汇总了一些常用的事件，用于大家了解与使用。

序号

事件类型

事件名称