如何能在外部监听到自定义html节点内部触发的事件？

[ghost]

请教各位，如何能在外部监听到自定义html节点内部触发的事件？

我预想是通过在内部执行类似 notify 或者 emit 的方法，将消息传到 graph，通过监听 graph 上的事件进行操作，但是好像不太行

import { Graph } from '@antv/x6'


Graph.registerHTMLComponent('board-html', (node) => {

  const el = document.createElement('div')
  
  el.textContent = 'Click Me!'
  el.addEventListener('click', function (e) {
      debugger
      // 在html节点里面向外部发送事件
      node.emit('board:item-click')
      node.notify('board:item-click')
  })

  return el
}, true)


const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

// 如何能在外部监听到？
graph.on('board:item-click', function(){
  debugger
})

graph.addNode({
  shape: 'html',
  html: 'board-html',
  x: 200,
  y: 40,
  width: 120,
  height: 60,
  label: 'rect',
  attrs: {
    body: {
      fill: '#efdbff',
      stroke: '#9254de',
    },
  },
})

可以粘贴到 https://antv-x6.gitee.io/zh/examples/node/native-node#rect 图表示例里面查看效果

---

发现每个节点携带了一个 store，可以利用其中的发布订阅模式来做

//组件内部
el.addEventListener('click', function (e) {
  debugger
  // 在html节点里面向外部发送事件 
  // node.store 天然的发布订阅模式
  node.store.emit('board:item-click', data)
})

node.store.on('board:item-click', (data) => {
//组件外部
})

但是这种方法使用了内部对象，有更好的方法解决这个问题吗？

[xut0793]

我是利用事件冒泡，监听节点点击事件，判断 e.target 是哪个目标元素来处理的。

graph.on('node:click', ({ node, e }) => {
      e.stopPropagation()
      const nodeData = node.getData()
      const classList = Array.from(e.target.classList)
      if (classList.includes('xq-icon-todo-list')) {
        console.log('查看部署日志')
      } else if (classList.includes('xq-icon-terminal')) {
        console.log('查看控制台日志')
      }
    })

[NewByVector]

如果是 click 事件，直接用自定义事件