通用事件

通用事件

Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：

#事件穿透

注意

Android`和`iOS`下原生事件传递机制不同，这里仅针对`iOS

当一个父View存在多个同级子View时，由于iOS会选择层级最高的View来响应事件，底层的View的事件永远都不会响应。

Weex在<div>组件中增加了eventPenetrationEnabled属性，当值为true（默认为false）时，View的子View仍能正常响应事件，但View自身将不会响应事件。

示例

#View交互性

Weex在<div>组件中增加了userInteractionEnabled属性，当值为false（默认为true）时，View及其子View均不响应事件，事件向下层View传递

#click

当组件上发生点击手势时被触发。

注意

<input> 和 <switch> 组件目前不支持 click 事件，请使用 change 或 input 事件来代替。

#事件对象

key	value	备注
type	click
target		触发点击事件的目标组件
timestamp		触发点击事件时的时间戳(不支持 H5)

示例

#longpress

如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。

#事件对象

key	value	备注
type	longpress
target		触发长按事件的目标组件
timestamp		长按事件触发时的时间戳(不支持 H5)

示例

#Appear

如果一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。

#事件对象

key	value	备注
type	appear
target		触发 Appear 事件的组件对象
timestamp		事件被触发时的时间戳(不支持 H5)
direction	up或down	触发事件时屏幕的滚动方向

示例

#Disappear

如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。

#事件对象

key	value	备注
type	disappear
target		触发 Disappear 事件的组件对象
timestamp		事件被触发时的时间戳(不支持 H5)
direction	up或down	触发事件时屏幕的滚动方向

示例

#stopPropagation

用于内嵌处理Native滑动冲突的情况，阻止Native事件进行冒泡传递。可结合shouldStopPropagationInterval和shouldStopPropagationInitResult属性来控制。

shouldStopPropagationInitResult 默认初始化false/true的结果。 shouldStopPropagationInterval 默认数字类型，控制touch频率，减少JS和Native通信次数，提升流畅性。可参考[Scroller内嵌List示例]

#事件对象无

Scroller内嵌List示例

#Page

注意

支持 iOS 和 Android，H5 暂不支持。

Weex 通过 viewappear 和 viewdisappear 事件提供了简单的页面状态管理能力。

viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 navigator 模块的 push 方法时，该事件将会在打开新页面时被触发。viewdisappear 事件会在页面就要关闭时被触发。

与组件的 appear 和 disappear 事件不同的是，viewappear 和 viewdisappear 事件关注的是整个页面的状态，所以它们必须绑定到页面的根元素上。

特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如wxc-navpage组件。

#事件对象

key	value	备注
type	viewappear 或 viewdisappear
target		触发事件的组件对象
timestamp		事件被触发时的时间戳

#Demo

• 综合示例