RactiveJS-04 Event proxies

简介

DOM事件可以说是交互的关键，常用的事件代理方式有原声的addEventListener或者jQuery的on方等等。

在Ractive.JS中，像下面这样定义事件代理：

<button on-click='activate'>Activate!</button>

然后这样定义事件：

ractive.on("activate", function(event){
    // 'this'指向ractive
    // 'event'包含了事件代理的信息
    alert("ok!ok!")
}

如果在开发工具上查看button元素会发现，元素上并没有绑定on-click事件。当Ractive.JS解析模板时，它可以自动区别对待以on-开头的属性。

绑定多个事件

可以一次性的绑定多个事件：

ractive1.on({
    myClick : function(){
        alert("okokok")
    },
    yourClick : function(){
        alert("nonono")
    }
})

解除事件

可以使用off或者cancel来解除事件绑定

reactive.off('myClick', 回调函数)

这种方法只要没有使用匿名函数作为回调函数就可以成功

// remove ALL 'select' handlers
ractive.off( 'select' );

// remove all handlers of ANY type
ractive.off();

也可以使用cancel方法取消绑定：

var click1 = ractive1.on({
     myClick : test
});
click1.cancel()

或者当使用了ractive.teardown()移除了ractive元素，则绑定的事件也会自动解除

自定义事件

自定义事件是通过插件实现的，插件下载地址在这里。