TTML-事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
在组件上绑定事件
如bindtap,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。
<!-- index.ttml -->
<view id="tapTest" data-hi="bytedance" bindtap="tapName"> Click me! </view>
Page({
tapName: function(event) {
console.log(event);
}
});
上面的 console.log 打印出来的 event 对象的信息大致如下:
{
"type": "tap",
"timeStamp": 895,
"target": {
"id": "tapTest",
"dataset": {
"hi": "bytedance"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi": "bytedance"
}
},
"detail": {
"x": 53,
"y": 14
},
"touches": [
{
"identifier": 0,
"pageX": 53,
"pageY": 14,
"clientX": 53,
"clientY": 14
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 53,
"pageY": 14,
"clientX": 53,
"clientY": 14
}
]
}
事件详情说明:
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
冒泡事件
类型 | 触发条件 |
---|---|
touchstart | 手指触摸动作开始 |
touchmove | 手指触摸后移动 |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 |
touchend | 手指触摸动作结束 |
tap | 手指触摸后马上离开 |
longpress | 手指触摸后,超过 350ms 再离开,如果指定了事件回调函数并触发了这个事件,tap 事件将不被触发 |
longtap | 手指触摸后,超过 350ms 再离开(推荐使用 longpress 事件代替) |
transitionend | 会在 TTSS transition 或 tt.createAnimation 动画结束后触发 |
animationstart | 会在一个 TTSS animation 动画开始时触发 |
animationiteration | 会在一个 TTSS animation 一次迭代结束时触发 |
animationend | 会在一个 TTSS animation 动画完成时触发 |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 |
事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。
- key 以 bind 开头,然后跟上事件的类型,如 bindtap。
- value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
事件对象
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent 基础事件对象属性列表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
detail | Object | 额外的信息 |
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
特殊事件: <canvas/> 中的触摸事件不可冒泡,所以没有 currentTarget。
target
触发事件的组件的一些属性值集合;
属性 | 类型 | 说明 |
---|---|---|
id | String | 事件源组件的 id |
tagName | String | 当前组件的类型 |
dataset | Object | 事件源组件上由 data-开头的自定义属性组成的集合 |
currentTarget
事件绑定的当前组件。
属性 | 类型 | 说明 |
---|---|---|
id | String | 当前组件的 id |
tagName | String | 当前组件的类型 |
dataset | Object | 当前组件上由 data-开头的自定义属性组成的集合 |
dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
demo:
<!-- index.ttml -->
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
DataSet Test
</view>
Page({
bindViewTap: function(event) {
event.currentTarget.dataset.alphaBeta === 1; // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2; // 大写会转为小写
}
});
touches
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
Touch 对象
属性 | 类型 | 说明 |
---|---|---|
identifier | Number | 触摸点的标识符 |
pageX, pageY | Number | 距离文档左上角的距离,文档的左上角为原点 ,横向为 X 轴,纵向为 Y 轴 |
clientX, clientY | Number | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为 X 轴,纵向为 Y 轴 |
CanvasTouch 对象
属性 | 类型 | 说明 |
---|---|---|
identifier | Number | 触摸点的标识符 |
x, y | Number | 距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为 X 轴,纵向为 Y 轴 |
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。
更多建议: