从零开始学习3D可视化之事件的常用方法

回复

1、绑定事件并添加条件

2、同一个事件注册多个回调

3、 tag 标签

4、设置事件优先级

5、注册单次事件

事件不会自己执行，需要触发(即事件被触发之后才可执行)。审视任何JavaScript代码的核心，你会发现正是事件是把所有东西融合在一起。下面我学习了一些在数字孪生可视化场景中事件的常用方法。

从零开始学习3D可视化之事件的常用方法

1、绑定事件并添加条件
事件添加了条件，只有在符合该条件的数字孪生可视化物体上 click 才会触发，无论是已经存在的 Thing 对象，还是后面新创建的 Thing 对象都会生效。

app.on("click", ".Thing", function(ev) {
console.log("you click " + ev.object.id);
});
obj.on("click", ".Marker", function(ev) {
console.log(ev.object.name);
});

复制代码

上面的例子，当这个数字孪生可视化物体子孙里有 Marker 物体，当它被点击就会触发。同全局绑定 Marker 物体，绑定后 obj 的子孙里新创建的 Marker 也响应这个事件。

2、同一个事件注册多个回调
试想一下，如果有一个模块在数字孪生可视化物体 click 时，改变物体颜色，另外一个模块需要在物体 click 时，放大物体。两个模块又是不同人写的，那该如何注册事件呢？

// 事件1：
obj.on("click", function(ev) {
ev.object.style.color = "#FF0000";
});
// 事件2：
obj.on("click", function(ev) {
ev.object.scale = [2, 2, 2];
});
// 卸载 obj 全部的 click 事件
obj.off("click");

复制代码

这两个事件，都会在 obj 被点击后触发。但使用 off() 卸载事件时，两个事件都会同时被卸载。因此我更推荐使用[tag]的方式。

3、 tag 标签
如果取消或者暂停事件，都要知道原回调函数，在大部分时候会比较麻烦，可以给数字孪生可视化场景中每个事件打上 tag，在删除或者暂停时，可用 tag 直接指定你要操作的回调。