cheerp 使用事件的例子

这个文章主要描述在cheerp环境下， c++代码如何通过js包装使用dom事件

1 what？事件

事件作为js异步编程的核心，很好的把逻辑分散开来，形成各个处理的handler。 首先事件的目标和当前目标都是实现了派发接口的，可以响应
事件并且可以添加事件监听处理的交互对象。
事件流拥有冒泡机制， 即从顶级元素流经目标元素并最终回到顶级元素，即所有的子元素都会作为事件流中的目标（target）来响应事件。

对于事件的应用，我想会有大量的文档在网络上，本文就不占篇幅了。
如果我们要使用cheerp平台做事件的派发和回调需要说明的内容就在这里了。

2事件的例子

在cheerp中注册一个最顶级的交互元素， 这个元素是window我们拥有window了以后可以拥有js端的玩法在c++端。

A. 首先我们先在js端实现一下浏览器端的事件定义，公开这些接口给cheerp。
cheerp定义：

Window * window_get_Window(); CustomEvent * window_getCustomEvent (const String & name); CustomEvent * window_getCustomEvent (const String & name, Object * param); 

window_getCustomEvent用了overload技术来适应js，然后在js文件中公开这两个函数。ps：（为了简单我把这两个函数作为全局函数定义，其实可以定义在包里）

function window_get_Window () { return window; } function window_getCustomEvent(type, params) { return new CustomEvent(type, {detail:params}); } 

B. 在cheerp端定义一个事件类型

 #define MY_EVENT_PUB "pub" 

C.用cheerp编写一个简单的使用监听的生成js代码

 class [[cheerp::genericjs]] TestEvent { private : static void MyEventPubHandler(Object *e) { console.log("i am catch this event"); } public: TestEvent() { } static void init () { Window * window = window_get_Window(); window->addEventListener(MY_EVENT_PUB, cheerp::Callback(MyEventPubHandler)); Event * event = window_getCustomEvent(MY_EVENT_PUB, false); window->dispatchEvent(event); }

};
D.在webMain入口中使用。

 void webMain () { //wasm 函数 TestEvent::init(); } 

然后编写一个makefile 生成两个不同版本的放在浏览器里run。

 CHERRP_PATH=/cygdrive/c/cheerp/include SOURCE=main.cpp CHEERP_FLAG=-target cheerp -w WASMFLAGS=-cheerp-linear-heap-size=256 -cheerp-linear-heap-size=256 -cheerp-mode=wasm -cheerp-no-math-imul WASM_LOADER=-cheerp-wasm-loader=loader.js -cheerp-wasm-file=./build/test.wasm CC=clang++ DIST_JS=./build/test.js DIST_WASM=./build/test_wasm.wasm clear: @rm -f ./build/* test.wasm: $(CC) $(CHEERP_FLAG) $(WASMFLAGS) $(WASM_LOADER) -O3 -o $(DIST_WASM) main.cpp test.js: $(CC) $(CHEERP_FLAG) -O3 -o $(DIST_JS) main.cpp cat head.js >> $(DIST_JS) all: clear test.js test.wasm @echo "build done" 

这样我们就可以拥有浏览器平台的事件流的能力了。

代码地址：git