Universal Events

NOTE
Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Event Description

• Events are bound to components. When a component meets the event triggering condition, the corresponding event callback in the JS is executed to implement the interaction between the UI and the JS logic layer of the page.

• The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters.

Different from private events, universal events can be bound to most components.

NOTE
Events not listed in the preceding table do not support bubbling, such as the change event of the <input> component. For details, see the description of the specific component.

Table 1 BaseEvent

Table 2 TouchEvent (inherited from BaseEvent)

Table 3 TouchInfo

Table 4 SwipeEvent (inherited from BaseEvent)

Table 5 PinchEvent⁷⁺

Table 6 DragEvent⁷⁺ (inherited from BaseEvent)

Target⁶⁺

When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object.

Example

<!-- xxx.hml -->
<div>
  <div data-a="dataA" data-b="dataB" 
    style="width: 100%; height: 50%; background-color: saddlebrown;"@touchstart='touchstartfunc'></div>
</div>

// xxx.js
export default {
  touchstartfunc(msg) {
    console.info(`on touch start, point is: ${msg.touches[0].globalX}`);
    console.info(`on touch start, data is: ${msg.target.dataSet.a}`);
  }
}