Back

【Lesson 12】 Titanium event 的处理

发布时间: 2016-01-21 21:15:00

refer to:  http://docs.appcelerator.com/platform/latest/#!/guide/Event_Handling

基础

event, 在titanium 中,可以被用户触发(tap, click ... ) ,也可以被系统触发(start, pause...) 

可以是 全局的(整个app) ,也可以是针对某个组件的(例如一个 button)的事件。

要使用event , 就需要先声明它。 一个地方触发,另一个地方监听。 

例如: 

button = Ti.UI.createButton();

// 先对某个元素进行 事件监听
button.addEventListener('kiss_me', function(e){
    console.info('== you kissed me');
})

function kiss(){
    // 在某处地方,对该元素的事件进行触发
    button.fireEvent('kiss_me');
}

// 所以,在这里执行某个函数的时候,对应的元素的事件就会被执行了。
kiss()  

要注意的两点:

1. addEventListener 函数的第二个参数,是个function(e) {} ... 注意这里的参数e. 它的主要属性有:

    e.x,  e.y:  在组件上的坐标

    e.globalPoint: 在屏幕上的坐标 (IOS才有这个属性)

    e.type: 事件的类型(click, dbclick ... ) 

    e.source:  事件发生的元素

    一般来说,这个e 不要轻易使用JSON.stringify 打印,因为它内容特别多,搞不好就stackoverflow.... 

2. 在哪个 元素( 例如上面例子中的 button) fireEvent, 就的在该元素上提前 addEventListener,  。 

3. 对于UI元素(Ti.UI.View .. ) 有个属性: touchEnabled  ,决定了该UI组件是否接受 触摸的事件。它的值默认是true. 

触发事件时,使用e 来传递参数

这里是个核心。

昨天我问明星,如何在js代码中,传递一个 event 函数到java中,让java的事件处理函数可以 响应,并且返回值。

(例如,在高德地图js module中,点击marker, 会调用java代码中的marker event ,如何把它的调用结果传递回 js中?)

明星告诉我,在module中,需要触发event, 然后在js 代码中 addEventListener 该event. 然后传递参数

在java代码中( view proxy 中):

class SomeProxy ....{
    public boolean on_button_clicked( third.party.Marker marker){
          HashMap event = new HashMap();
          event.put("title", marker.title);
          this.fireEvent("marker_clicked", event);
    }
}

在js 代码中:

some_proxy.fireEvent('marker_clicked', {title: 'oh yeah'});

统一在js 代码中做事件监听:

some_proxy.addEventListener('marker_clicked', function(e){
    some_label.text = e.title;
})

触摸的事件

下列都是触摸的事件,它们都遵循着冒泡原则:(TODO 需要翻译)

click
dblclick
doubletap
longclick
longpress
pinch
singletap
swipe
touchcancel
touchend
touchmove
touchstart
twofingertap

建立自定义事件

我们完全可以为自己定义自定义事件。例如: kiss_me, hug_me, eat_apple, user_login 等。

记住一点即可: 事件的命名中不能有空格,例如: 'kiss_me' 是对的, 'kiss me' 就不行。

定义系统级别的事件

也就是定义一个事件,让 Ti.App 来使用:

Ti.App.addEventListener('smile', function(e){});

Ti.App.fireEvent('smile');

注意: 定义到Ti.App上的event, 会随着app的运行而一直存在,放到里面的信息,就不会被GC清理掉。

这里务必注意。 用完还要把对应的事件删掉。

删掉某个事件。

务必使用 named function,不能使用匿名函数了。因为removeEventListener 需要这个函数名作为参数

function kiss_me(){
    console.info("kiss_me");
}

Ti.App.addEventListener('show_love', kiss_me);
Ti.App.removeEventListener('show_love', kiss_me); 

安卓自带的系统级别的事件:


androidback : 点击了back 
androidhome : 点击完home键
androidsearch : 点击了搜索键 (好像4.X之后就没有搜索了吧)
androidcamera: 点击了摄像头
androidfocus:  操作摄像头,做了聚焦
androidvolup: 点击了 提高音量
androidvoldown: 点击了 降低音量

androidback 在 3.x 以前,写为: android:back  ,其他都是。

Back