- An event is used for communication between the view layer and the logical layer.
- An event can pass user behavior to the logical layer for processing.
- You can bind an event to a component. When the event is triggered, the corresponding event handler at the logical layer is executed.
- An event object can carry extra information, such as the
To bind an event handler, for example
onTap, to a component, define the corresponding
onTap event handler in the
Page object in the
.js file of the page.
<view id="tapTest" data-hi="Alipay" onTap="tapName">
<view id="tapTestInner" data-hi="AlipayInner">
In the relevant
Page object, define the corresponding event handler
tapName with the event object as the parameter.
The event information generated in the console is shown as follows.
When you use a basic component, an extension component, or a custom component, whether an event is available depends on whether the component supports the event. You can find the supported events of each component in the component document.
Events are classified into the following two types:
- Bubbling event: The name of a bubbling event starts with the prefix
on. After a bubbling event is triggered in a component, the event will be transferred to the parent node.
- Non-bubbling event: The name of a non-bubbling event starts with the prefix
catch. After a non-bubbling event is triggered in a component, the event will not be transferred to the parent node.
The syntax of event binding is similar to the syntax of a component attribute and consists of a key and a value.
- A key starts with
catch, followed by the event type. For example, the key can be
- A value is a string that corresponds to the function name defined in the Page object. If the corresponding function name does not exist, an error occurs.
<view id="outter" onTap="handleTap1">
<view id="middle" catchTap="handleTap2">
<view id="inner" onTap="handleTap3">
Refer to the preceding code. A tap on view3 triggers handleTap3 and handleTap2 in order, because the tap event bubbles to view2 and view2 stops the tap event from going up to the parent node. A tap on view2 triggers handleTap2. A tap on view1 triggers handleTap1.
The following table describes all the types of bubbling events.
|touchStart||Start the touch action|
|touchMove||Move after the touch action|
|touchEnd||End the touch action|
|touchCancel||The touch action is interrupted, such as by a incoming call reminder or pop-up window|
|tap||Leave after a short tap on the screen|
|longTap||Leave after a long tap on the screen that lasts more than 500 ms|