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

9次阅读

共计 1677 个字符，预计需要花费 5 分钟才能阅读完成。

1、绑定事件并增加条件
2、同一个事件注册多个回调
3、tag 标签
4、设置事件优先级
5、注册单次事件
事件不会本人执行，须要触发(即事件被触发之后才可执行)。扫视任何 JavaScript 代码的外围，你会发现正是事件是把所有货色交融在一起。上面我学习了一些在数字孪生可视化场景中事件的罕用办法。

事件增加了条件，只有在合乎该条件的数字孪生可视化物体上 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 也响应这个事件。

试想一下，如果有一个模块在数字孪生可视化物体 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");

3、tag 标签
如果勾销或者暂停事件，都要晓得原回调函数，在大部分时候会比拟麻烦，能够给数字孪生可视化场景中每个事件打上 tag，在删除或者暂停时，可用 tag 间接指定你要操作的回调。

// 模块 1 中：obj.on("click",function(ev) {ev.object.style.color = "#FF0000";},"模块 1");
 
// 模块 2 中：obj.on("click",function(ev) {ev.object.scale = [2, 2, 2];
},"模块 2");
// 勾销 "模块 1" 的事件回调，不影响“模块 2”的回调
obj.off("click",null ,"模块 1");

两个都是 click 事件，如果心愿保障模块 2 的事件先于模块 1 触发，则须要增加一个参数 priority, 个别事件默认的优先级是 50，设置的越大，越优先触发。

// 模块 1：obj.on("click",function(ev) {ev.object.style.color = "#FF0000";},"模块 1");
 
// 模块 2：obj.on("click",function(ev) {ev.object.scale = [2, 2, 2];
},"模块 2",51);

在数字孪生可视化场景中如果须要一个事件只执行一次，就须要卸载掉，你能够应用 one 这个接口代替 on，参数和 on 是一样的。
提供 priority 的能力：

// 下例中是给每个楼层的注册了一次 EnterLevel 事件，即 每个楼层第一次进入时 都会响应
app.one(THING.EventType.EnterLevel, '.Floor', function (ev) {console.log(ev.object.id);
})
 
// 如果只给某个楼层注册 如下
var floor = app.query('.Floor')[0];
floor.one(THING.EventType.EnterLevel, function (ev) {console.log(ev.object.id);
})

—————————————————
数字孪生可视化：https://www.thingjs.com/

正文完