webgl三维可视化在线开发实用教程

事件

ThingJS 系统内置了很多事件，比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理。

事件介绍

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

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

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

注意事项

在全局绑定后，新创建的符合条件物体也可以生效。

一些事件也可以不添加条件，不针对特定物体即可生效。

例子1：

app.on("click",function(ev){console.log("you click!");});

上面的例子，不添加条件，鼠标一 click 就触发。

例子2：

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

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

查看示例

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

也可以不添加条件，表示该事件是针对物体本身的

例子3：

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

上面的例子，当这个物体被点击，就会触发

例子 4：

obj.on("click",".Marker",function(ev){console.log(ev.object.name);});

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

例子 5：

obj.query(".Marker").on("click",function(ev){console.log(ev.object.name);});

上面的例子，其实就是直接查询 obj 其下所有的 Marker 物体，遍历找到的 Marker，分别使用 on 注册事件。

注意事项

这个方式是对 obj 下每个查询到的 Marker 物体即时绑定的，对于 obj 下后创建的 Marker，是没有影响的。

上面的例子，其实就是直接查询 obj 其下所有的 Thing 物体，遍历找到的 Thing，分别使用类似例子 4 的方式绑定事件。

ThingJS都提供哪些事件

所有事件通过 THING.EventType 命名空间索引，也可以查询 API 中的 EventType 对应的字符串，不区分大小写。

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

也可以写成

obj.on(THING.EventType.Click,function(ev){console.log(ev.object.name);});

data 的使用

例子 7：

varcb=function(ev){varcolor=ev.data;// 获取传入的颜色ev.object.style.outlineColor=color;};// 这里将颜色作为参数传给回调函数，在回调函数中通过 ev.data 获取app.query(".Building").on("mouseon",".Thing","#FF0000&#