id
、dataset
和 touches
。
事件分为冒泡事件和非冒泡事件。
类型 | 触发条件 | |
---|---|---|
touchstart | 手指触摸动作开始。 | |
touchmove | 手指触摸后移动。 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗。 | |
touchend | 手指触摸动作结束。 | |
tap | 手指触摸后马上离开。 | |
transitionend | 会在 TYSS transition 或 createAnimation 动画结束后触发。 |
|
animationstart | 会在一个 TYSS animation 动画开始时触发。 | |
animationiteration | 会在一个 TYSS animation 一次迭代结束时触发。 | |
animationend | 会在一个 TYSS animation 动画完成时触发。 | |
longpress | 手指触摸后,超过 350ms 再离开,如果指定了事件回调函数并触发了这个事件,tap 事件将不被触发。 | 2.13.0 |
longtap | 手指触摸后,超过 350ms 再离开(推荐使用 longpress 事件代替)。 |
2.13.0 |
说明:如无特殊声明,除上表之外的其他组件自定义事件都是非冒泡事件,如
的
submit
事件,的
input
事件,scroll-view
的scroll
事件。详见各个组件。
模板语法中通过以下两种语法形式,添加事件绑定:
bind:{事件名}
绑定事件。catch:{事件名}
绑定并阻止事件冒泡。
使用 bind:
形式绑定事件。
Click here!
使用 catch:
形式绑定事件。
例如,在下边这个例子中:
handleTap3
和 handleTap2
。因为 tap
事件会冒泡到 middle view,而 middle view 阻止了 tap
事件冒泡,不再向父节点传递。handleTap2
。handleTap1
。
outer view
middle view
inner view
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型。 |
timeStamp | Integer | 事件生成时的时间戳。 |
target | Object | 触发事件的组件的一些属性值集合。 |
currentTarget | Object | 当前组件的一些属性值集合。 |
属性 | 类型 | 说明 |
---|---|---|
detail | Object | 额外的信息。 |
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组。 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组。 |
代表事件的类型。
页面打开到触发事件所经过的毫秒数。
触发事件的源组件。
属性 | 类型 | 说明 |
---|---|---|
id | String | 事件源组件的 ID。 |
dataset | Object | 事件源组件上由 data- 开头的自定义属性组成的集合。 |
事件绑定的当前组件。
属性 | 类型 | 说明 |
---|---|---|
id | String | 当前组件的 ID。 |
dataset | Object | 当前组件上由 data- 开头的自定义属性组成的集合。 |
说明:
target
和currentTarget
可以参考上例中,单击inner view
时,handleTap3
收到的事件对象target
和currentTarget
都是inner
,而handleTap2
收到的事件对象target
就是inner
,currentTarget
就是middle
。
在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
在模板中,这些自定义数据以 data-
开头,多个单词由连字符 -
连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:
data-element-type
,最终会呈现为 event.currentTarget.dataset.elementType
; data-elementType
,最终会呈现为 event.currentTarget.dataset.elementtype
。
示例:
DataSet Test
Page({
bindViewTap: function (event) {
event.currentTarget.dataset.alphaBeta === 1; // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2; // 大写会转为小写
},
});
touches
是一个数组,表示当前停留在屏幕上的触摸点。每个元素为一个 Touch
对象。canvas
触摸事件中携带的 touches
是 CanvasTouch
数组。
Touch
对象
属性 | 类型 | 说明 |
---|---|---|
identifier | Number | 触摸点的标识符。 |
pageX, pageY | Number | 距离文档左上角的距离。文档的左上角为原点,横向为 X 轴,纵向为 Y 轴。 |
clientX, clientY | Number | 距离页面可显示区域(屏幕除去导航条)左上角距离。横向为 X 轴,纵向为 Y 轴。 |
changedTouches
数据格式同 touches
。表示有变化的触摸点,如从无变有(touchstart
),位置变化(touchmove
)以及从有变无(touchend
、touchcancel
)。
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息。详见组件定义中各个事件的定义。
单击事件的 detail
带有的 x
和 y
,同 pageX
和 pageY
。代表距离文档左上角的距离。
如 bind:tap
,当用户单击该组件的时候,会在该页面对应的 Page
中找到相应的事件处理函数。
Click me!
在相应的 Page
定义中,写上相应的事件处理函数,参数是 event
。
Page({
handleTap: function (event) {
console.log(event);
},
});
可以看到 log
出来的 event
对象大致如下:
{
"type": "tap",
"timeStamp": 3817,
"target": {
"id": "abc",
"offsetLeft": 105,
"offsetTop": 197,
"dataset": { "hi": "smart" }
},
"currentTarget": {
"id": "abc",
"offsetLeft": 105,
"offsetTop": 197,
"dataset": { "hi": "smart" }
},
"touches": [
{
"identifier": 0,
"pageX": 243,
"pageY": 209,
"clientX": 243,
"clientY": 209
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 243,
"pageY": 209,
"clientX": 243,
"clientY": 209
}
]
}