Shulou(Shulou.com)05/31 Report--

This article mainly introduces the method of "WeChat Mini Programs event binding parameter bubbling and capture". In daily operation, I believe many people have doubts about the method of WeChat Mini Programs event binding parameter bubbling and capturing. The editor consulted all kinds of data and sorted out a simple and useful operation method. I hope it will be helpful to answer the doubts of "WeChat Mini Programs event binding parameter bubbling and capturing method". Next, please follow the editor to study!

Common events are: type trigger minimum version touchstart finger touch action starts touchmove finger touch movement touchcancel finger touch action is interrupted, such as call reminder, pop-up window touchend finger touch action ends tap finger touch immediately leaves longpress finger touch, then leaves after 350ms, if the event callback function is specified and this event is triggered, the tap event will not be triggered after 1.5.0longtap finger touch Leave after 350ms (longpress event is recommended) transitionend will trigger after the end of a WXSS transition or wx.createAnimation animation, animationstart will trigger at the beginning of a WXSS animation animation, animationiteration will trigger at the end of an WXSS animation iteration, animationend will trigger touchforcechange at the completion of a WXSS animation animation, iPhone devices that support 3D Touch will be triggered again on time.

There are two points to note:

Touchcancle: triggered only in certain scenarios (such as interrupting incoming calls, etc.)

Tap events and longpress events usually trigger only one of them

The difference between currentTarget and target

Event transfer parameters

When an event occurs in the view layer, some cases require the event to bring some parameters to the executed function.

The data- property is used to complete:

1 format: name of the data- attribute

2 get: e.currentTarget.dataset. The name of the attribute

The difference between touches and changedTouches

There are two ways to bind events

First: bind: event name recommendation, separated by colons.

Wxml file:

I'm the button.

Js file:

Page (initial data of {/ * page * / data: {name: "jeff"}, / / e is the event object, and all the data generated by the event is in e click1:function (e) {console.log ("you clicked event 1", e)},)}

The second type: bind event names are not separated

Wxml file:

I'm event 2.

Js file:

Page (the initial data of the {/ * page * / e is the event object, and all the data generated by the event are in e click2:function (e) {console.log ("you clicked event 2", e)},)} event passing parameters

Keyword: setDate

WXML file:

You have clicked {{num}} currently.

Js file

/ / pages/test/test.jsPage ({data: {num:0,}, click2: function (e) {this.setData ({num:this.data.num+1}) console.log ('you clicked the button 2')},}) event bubbling and event capture capture-bind:tap= "click1" # event capture Execution order: bubbling from outer-> inner bind:tap= "click2" # events, execution order: from inner-> outer catch: preventing event capture capture-catch:tap= "click3" # sequence execution to click3, excluding click3. After that, it stopped the execution and stopped it.

Catch blocks capture

At this point, the study of "WeChat Mini Programs event binding method of parameter bubbling and capture" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.