这个文章主要描述在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
