search
HomeWeChat AppletMini Program DevelopmentLet's talk about event binding in WeChat mini programs

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>

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>

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.

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment