事件

ThingJS 拓扑组件中内置了部分常用事件，如鼠标点击、选中变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理。

绑定事件

全局绑定事件和局部绑定事件

用户的操作以及场景的变化，都会触发相应的事件。你可以监听这些事件，然后在回调方法中做相应的处理，通过 on() 方法绑定事件。

全局绑定：通过 graph.on() 绑定事件，可在全局下添加条件指定针对哪些对象绑定该事件，条件规则同于 query 使用的条件。

// 绑定事件
graph.on('click', function(ev) {
  console.log('you click!')
})

注意事项 在全局绑定后，新创建的符合条件对象也可以生效。

局部绑定：针对一个对象，或者 query 的查询结果（Selector），通过 on 接口绑定事件，我们叫局部绑定。同全局绑定，事件中可以加条件，表示这个事件绑定是针对集合中的所有对象的。

obj.on('click', function(ev) {
  console.log(ev.object.name)
})

应用示例

在下面的章节中，将详细介绍事件的常用方法

绑定事件并添加条件

事件添加了条件，只有在符合该条件的对象上 click 才会触发，无论是已经存在的对象，还是后面新创建的对象都会生效。

// 监听画布中 id 为 node1 的对象点击
graph.on('click', '#node1', function(ev) {
  console.log('you click ' + ev.object.id)
})

注册单次事件

如果需要一个事件只执行一次，就需要卸载掉，你可以使用 once 这个接口代替 on，参数和 on 是一样的。

// 监听画布中 id 为 node1 的对象的第一次点击
graph.once('click', '#node1', function(ev) {
  console.log('you click ' + ev.object.id)
})

卸载事件

当我们想卸载一个事件的时候使用 off() 方法。

graph.on('click', function(ev) {
  console.log('you click!')
})

// 卸载
graph.off('click')

自定义事件

ThingJS 拓扑组件中支持自定义事件的监听和触发，外部注册还是使用 on，在需要触发的地方我们使用 trigger 接口来对外触发事件。

// 自定义事件监听和触发
graph.on('customevent', function(ev) { 
  console.log(ev.level)
})
graph.trigger('customevent', { level: 1 })

参考信息

常用事件类型

下一个教程中，我们来学习动画。