This is the first day of my participation in the August Challenge. For details, see:August is more challenging
Dear friends, hello! Just see the August more text challenge, by the way, as a study notes. The first time to write an article, the inadequacies please forgive, write wrong place, welcome to correct!
What is an event
- Events are the communication between the view layer and the logical layer,
- Events can feed back user behavior to the logical layer for processing,
- Events can be bound to a component, and when a trigger event is reached, the corresponding event handler in the logical layer is executed,
- Event objects can carry additional information such as ID, dataset, and Touches
Events by value
Small program can bind an event on the component function, through the set value of the attribute data – * we need to convey, and then through the currentTarget property of the dataset to get parameters of the event object (event. The currentTarget. Dataset)
Note: Data -* names cannot be uppercase letters
//.wxml <view class="outer" id="father" bindtap="outerTap"> </text> <! Data-name = data-name; <view class="inner" id="child" bindtap="innerTap" data-name=" inner tap "data-age="18"> <view class="inner" id="child" bindtap="innerTap" data-name=" inner tap" data-age="18"> </text> </view> </view> //.js innerTap(event){console.log(event) // The received event object has the following properties /* * {type: "Tap ", timeStamp: 69544, target: {... }, currentTarget: {... }, mark: {... },... } hello: [{...}] Hello: "Hello" {hello: "hello ", age:" hello ", age: "hello "} hello:" Hello ", age: "hello ", age:" hello "} hello: "Hello ", age:" Hello ", age: "Hello "} hello:" Hello" 1 Object detail: {x: 71.13751220703125, y: 94.05004119873047} mark: {} mut: false target: Dataset: {ABC: "", age:" ", name: ""} iD: "child" offsetLeft: 1 offsetTop: 22 __proto__: Object timeStamp:" dataset: {ABC: "", age:" ", name: ""} ID: "child" offsetLeft: 1 69544 touches: [{...}] type: "touches" _touches: true __touches: Object / / * * * * by the event. The currentTarget. The dataset to get from WXML passed parameters. * / console log (event. The currentTarget. Dataset) / / {age: "", name:" ", name: "", name:" ",Copy the code
The difference between target and currentTarget
Using bindtap binding event functions, when click the inner elements, innerTap event functions of output event. The target. The dataset and the event. The currentTarget. The same dataset, But outerTap event function call output event. The target. The dataset for {color: “red”} and the event. The currentTarget. The dataset for {age: “18,” name: “little red”} is not the same.
It follows that:
The target corresponds to the component from which the event was triggered. This component can be either a child or a parent, depending on where the action is performed. CurrentTargent always corresponds to the component to which the event is bound.
//.wxml <view class="outer" id="father" bindtap="outerTap" data-color="red"> <text> </text> <view class="inner" Id ="child" bindtap="innerTap" data-age="18"> </text> </view> </view> //.wxs.outer {width: outer; 300rpx; height: 300rpx; border: 2rpx solid red; } .inner{ width: 200rpx; height: 200rpx; border: 2rpx solid black; {} / / js outerTap (event). The console log (' I am the outer element) console. The log (' event. The currentTarget. The dataset: ',event.currentTarget.dataset) console.log('event.target.dataset: ', the event. The target. The dataset)}, innerTap (event) {the console. The log (' I am the inner elements, I clicked ') to the console. The log (' event. The currentTarget. The dataset: ',event.currentTarget.dataset) console.log('event.target.dataset: ', the event. The target. The dataset)}, / / I am inner elements, I clicked / / event. The currentTarget. The dataset: {the age: "18", name: "Little red"} / / 53 event. Target. The dataset: {the age: "18," name: "little red"} / / / / I am outer elements event. CurrentTarget. The dataset: {color: "Red"} / / event. The target. The dataset: {the age: "18," name: "little red"}Copy the code