The event mechanism is a very typical way of communication, which can pass information between different objects in the code, and can also communicate and cooperate at different levels of the application. Today we want to take a look at the event handling mechanism provided by the WeChat applet framework.
(Now I mainly write things in shorthand, you can check my shorthand book)
The official Mini Program documentation defines an event as:
- Events are the communication method from the view layer to the logic layer
- Events can feed back the user's behavior to the logic layer for processing
- Events can be bound to components, and when the trigger event is reached, the corresponding event handler function in the logic layer will be executed.
- Event objects can carry additional information such as id, dataset, touches.
From here, we can see that the official document mainly uses events for the processing of user interaction behavior in the applet, that is, the communication from the view layer (WXML) to the logic layer (Page). After the logic layer receives these user behavior events, it can Carry out business processing, and then feedback or not feedback the results to users according to the situation.
Well, today we will put aside other usages of events, and focus on the usage of events between the view layer and the logic layer.
Generally speaking, the working principle of the event mechanism in the applet is consistent with the event mechanism of the HTML DOM. In HTML, we can bind the user's page click event handler by setting an attribute such as onclick="clickHandler(event)" on the HTML element. In WXML, we bind an event handler to a component, which can be done using the following syntax:
The bindtap here can be understood as binding the tap (click) event to an event handler named tapName for processing. Then in the corresponding Page code, we need to define this tapName function:
This completes the processing of a simple tap event. When we click on the view component displayed as Click me on the interface of the applet, the view component captures the tap action, and then tells the tapName function in the Page to process this action. At the same time, it is also the tapName function. Provide enough information, that is, the event object, to help us process our business logic better and more accurately. We can take a look at what is contained in the event object in our example:
Here we can see that the event object contains the name of the event, the information of the event target object, and the location information on the interface where the event occurred, and so on. The value of the data-hi attribute we set on the component is also carried over on the dataset in the target, which is more useful. In actual development, we can use this feature to pass more information about the view layer to the logical layer for processing.
If you have experience in DOM programming, you will think here, how to deal with the bubbling and non-bubbling of events in the applet? If you don't know what event bubbling is, I'll explain it here:
In the interface layout methods based on XML tree structure such as HTML or WXML, there is a hierarchical relationship between elements. Events triggered on child elements can be passed up to the parent element layer by layer. Therefore, the parent element Elements can also capture events on child elements and process them logically.
This event bubbling mechanism is often used in actual development, so it is necessary for us to understand how to use bubbling events in small programs. WXML provides two ways to bind event handlers:
1. Use the event binding starting with bind, this binding will not prevent the bubbling event from bubbling up
2. Use the event binding at the beginning of catch, which can prevent the bubbling event from bubbling up
For the sake of intuition, let's go straight to a sample code:
In this sample code, there are three nested view elements, the innermost is the content element, and the outermost is the outer-container element. On the innermost and outermost elements, the bind attribute is used to bind the tap event handler, and on the inner-container in the middle, the catch attribute is used to bind the tap event.
Then, we try to click on the content, we can see this result:
The tap event handlers for the content and inner-container elements are executed, but not for the outer-container element. This shows that in the process of clicking on the content, the generated tap event is passed to the parent element, and as the parent element inner-container of the content element, it uses the catch method that can prevent the event from bubbling, so it is captured by bubbling After the event of the child element in the form is executed and the event handler is executed, the event is stopped from being passed upwards, so the outer-contaner of the parent element, which is also the parent element, can no longer receive this bubbling event.
Then, let's take a look at the data characteristics of event objects captured by elements at different levels:
We can see that in the tap event handler of content, the ids of target and currentTarget in event are both content.
In the event object in inner-container, the id of target is content, and the id of currentTarget is inner-content.
From this, we can know that the target in the event object is the source component of the event, and the currentTarget is the component that currently captures the event.
The event object also contains other useful information, such as touches and changedTouches, which represent the touch position and change position of one or more fingers on the screen, which can be used to implement advanced multi-touch gesture processing.
Finally, about event bubbling, it is worth noting that not all events are bubbling in the WeChat applet. We know from the official documentation that the touch events of the <canvas> component cannot be bubbling.