Home > WeChat Applet > Mini Program Development > Let's talk about event binding in WeChat mini programs

Let's talk about event binding in WeChat mini programs

WBOY
Release: 2022-10-12 14:07:22
forward
3080 people have browsed it

This article brings you related questions about WeChat Mini Program, which mainly introduces the relevant content about event binding, including what are events, commonly used events in Mini Programs, Let’s take a look at the differences between target and currentTarent. I hope it will be helpful to everyone.

Let's talk about event binding in WeChat mini programs

[Related learning recommendations: 小program learning tutorial]

What is an event

The event is the rendering layer Communication method to the logic layer. Through events, the form generated by the user in the rendering layer can be fed back to the logic layer for business processing.

Commonly used events in small programs

Lets talk about event binding in WeChat mini programs

Attribute list of event objects

Lets talk about event binding in WeChat mini programs

target and currentTarent The difference

target is the source component that triggered the event, while currentTarget is the component to which the current event is bound. For example:

<view class="out-view" bindtap="outHandler">
    <button type="primary">按钮</button>
</view>
Copy after login

When you click the internal button, the click event will bubble outward and trigger the tap event handler of the outer view.

At this time, for the outer view:

e.target points to the source component that triggers the event. Therefore, e.target is the internal button component

e.currentTarget points to the component that is currently triggering the event. Therefore, e.currentTarget is the current view component

Lets talk about event binding in WeChat mini programs

bindtap syntax format

In the mini program, there is no onclick mouse click event in HTML, but the tap event is used to respond to the user's touch behavior.

Through bindtap, you can bind tap touch events to components. The syntax is as follows:

<button type="primary" bindtap="btnTapHandler">按钮</button>
Copy after login

Define the corresponding event processing function in the .js file of the page. The event parameters are passed through the formal parameter event (generally Abbreviated as e) to receive:

Page({
    btnTapHandler(e){   //按钮的tap事件处理函数
        console.log(e)   // 事件参数对象e
    }
})
Copy after login

Every time the button is pressed, the event parameter object will be printed on the terminal, and the finger touch event will be triggered.

Lets talk about event binding in WeChat mini programs

【Related learning recommendations: 小program learning tutorial

The above is the detailed content of Let's talk about event binding in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template