需求
业务上在预览流程时经常需要实时展示元素信息,比如光标移动到某个BPMN元素上,或者点击元素时,实时提取元素信息。
有两种方式可以实现事件监听。
方法一: eventBus方式
添加一个div>textarea用来展示提取信息
<div id="console"> <textarea id="js-console" >console</textarea></div>
<style>
#js-console{
width: 200px;
}
</style>
添加整年监听代码
let eventBus = this.bpmnModeler.get('eventBus');
//同时监听多种事件类型
const events = [
'element.hover',
'element.out',
'element.click',
'element.dblclick',
'element.mousedown',
'element.mouseup'
];
events.forEach(function (event) {
eventBus.on(event, function (e) {
let consoles = document.querySelector('#js-console');
consoles.textContent =&