Preface
UniApp is a cross-platform development framework that supports multiple front-end frameworks (Vue, React, Angular, etc.) and can be packaged into multiple running platforms (H5, mini programs, Apps, etc.). In UniApp, event processing is very important, and interaction between users and applications can be achieved through event processing. The following are the commonly used event handling methods in UniApp:
1. Binding events
In templates, events can be bound by @ symbols, for example:
<button @click="handleClick">Click me</button> A bound here click event，And the bound function is handleClick。
2. Event modifier
Event modifiers refer to some special symbols used when binding events to modify the behavior of events. Common event modifiers include:
- prevent: block default behavior
- stop: prevent events from bubbled
- capture: Use event capture mode
- self: The callback function is triggered only when the event is triggered from the event source itself
- Once: only trigger the callback function once
- Passive: Improve the smoothness of page scrolling
For example:
<!-- Block default behavior --> <button @="handleClick">Click me</button> <!-- Stop events from bubbles --> <button @="handleClick">Click me</button> <!-- Use event capture mode --> <button @="handleClick">Click me</button> <!-- The callback function is triggered only when the event is triggered from the event source itself --> <button @="handleClick">Click me</button> <!-- Only trigger the callback function once --> <button @="handleClick">Click me</button> <!-- Improve the smoothness of page scrolling --> <button @="handleClick">Click me</button>
.prevent and .stop are two different event modifiers, and although they have some similarities, they have different functions in event processing.
1.prevent The default behavior used to block events, such as blocking the default jump of the <a> tag, blocking the default submission of the form, etc.
If an event is modified by the .prevent modifier, the default behavior of the event will not be performed when the event is triggered, but only the `bound event handling function` will be executed.2.stop is used to prevent the bubble propagation of an event. Event bubbles are when an element triggers an event, the event will propagate to the parent element.
If an event is modified by the .stop modifier, the event will not be propagated to the upper element when the event is triggered, but will only be processed inside the current element.Therefore, .prevent and .stop are different, but they both can prevent the default behavior of events.
.prevent is used to block the default behavior of elements, and .stop is used to block the bubbling of events.
Specific examples：
When a link is clicked，Will trigger click event。If the link is not set href property，The default behavior is not to jump，
But if set href property，It will jump to href Specified page。
in this case，Available .prevent and .stop Modifier来阻止链接的默认跳转行为and冒泡传播。
We set the link href property，And bound click eventand handleLinkClick method。
at the same time，We used it on the link .prevent and .stop Modifier来阻止默认的跳转行为and冒泡传播。
<template>
<div @click="handleDivClick">//Upper layer click event. Used to check whether the click event below is bubbling up <a href="" rel="external nofollow" @="handleLinkClick">Click me</a>
</div>
</template>
<script>
export default {
methods: {
handleLinkClick() {
('Internal events——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————);
},
handleDivClick() {
('External event -----div was clicked');
}
}
};
</script>
When clicking on a link，The console will output 【内部event————The link was clicked】
The link was clicked，No jump。
at the same time，Because .stop Modifier，event也不会向上层元素冒泡传播，因此点击链接时不Will trigger外部event handleDivClick method。
1、If we put .prevent Modifier去掉，It will jump when clicking on the link。Indicates that the default behavior exists，But stopped。
2、If .stop Modifier去掉，点击链接时Will trigger handleDivClick method。说明点击event冒泡了。
This shows .prevent and .stop Modifier的区别，.prevent Can block default behavior，.stop Can prevent bubble spread。
默认行为指的是元素在触发某些event时，Preset behaviors that the browser will perform。
For example，When a user clicks on a link，The browser will jump to the specified link by default URL。When a user submits a form，The browser will send form data to the server by default and refresh the page。
These behaviors are built into the browser，Can be passed JavaScript Code to block or modify。
3. Built-in events
In UniApp, there are also some built-in events to use. These events refer to events that are automatically triggered in certain situations, such as:
- onLoad: Triggered when the page loads
- onReady: Triggered when the page is rendered for the first time
- onShow: Triggered when page displays
- onHide: Triggered when the page is hidden
- onUnload: Triggered when page uninstalls
These events can be used in pages or components, for example:
export default {
onLoad() {
('Page loading is complete');
},
onReady() {
('The first rendering of the page is completed');
},
onShow() {
('Page Display');
},
onHide() {
('Page Hide');
},
onUnload() {
('Page Uninstall');
}
}
4. Custom events
In UniApp, you can also use the uni. em i t and u n i . emit and uni. emit and uni. emit methods to implement the processing of custom events. For example:
// Send custom eventsuni.$emit('myEvent', {data: 'Custom event parameters'});
// Listen to custom eventsuni.$on('myEvent', (data) => {
('Custom event received', data);
});
Passed here uni.$emit A sent name myEvent Custom events，
And passed a parameter {data: 'Custom event parameters'}。Where the event needs to be listened to，
Available uni.$on Method to listen for this event，and handle events in the callback function。
5. Event Object
In the event handler function, the event object can be obtained through the $event parameter. The event object contains some information about the event, such as:
- type: event type
- target: event source
- currentTarget: Current component
- detail: custom data
For example:
<button @click="handleClick">Click me</button>
methods: {
handleClick($event) {
('Event Type', $);
('Event Source', $);
('Current Component', $);
('Custom Data', $);
}
}
The above are the commonly used event handling methods in UniApp, including binding events, event modifiers, built-in events, custom events and event objects.
Mastering this knowledge can help you handle events more flexibly and achieve rich user interaction effects.
Summarize
This is the article about the commonly used event handling methods in uniapp. For more related uniapp event handling content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!