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