Home  >  Article  >  WeChat Applet  >  Let’s talk about event binding in WeChat mini programs

Let’s talk about event binding in WeChat mini programs

WBOY
WBOYforward
2022-10-12 14:07:222976browse

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

Let’s talk about event binding in WeChat mini programs

Attribute list of event objects

Let’s 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>

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

Let’s 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>

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
    }
})

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

Let’s 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!

Statement:
This article is reproduced at:juejin.im. If there is any infringement, please contact admin@php.cn delete