Micro letter applet articles] III. Event micro-channel applet

event

Project Preparation

1. Create a project demo3,
2. Procedure with demo2
3. But first directory can be changed to second catalog (content index can also be sub-directory of the file deleted)

1. Event category

1. tap your finger touch and release immediately
2. Touch event
   • touchstart finger touch operation start
   • touchend finger touch operation is completed
   • After moving a finger touch touchmove
   • touchcancel a finger touch action is interrupted, such as call reminder, pop
3. Continuous touch event
   • longtap finger after touching more than 350ms and then leave (instead of recommended longpress event)
   • longpress finger after touching more than 350ms and then leave if a specified event callback function and triggered the event, tap the event will not be triggered
4. Other event details to view the document

2. Events Case

Case Preparation

second.wxml

<view class="view1" bindtap="click1">
  这个是view1
  <view class="view2" bindtap="click2">
    这个是view2
    <view class="view3" bindtap="click3">
      这个是view3
    </view>
  </view>
</view>

second.js

Page({
  data: {  },

  // view1~3的点击事件
  click1:function(){
    console.log("点击view1");
  },
  click2:function(){
    console.log("点击view2");
  },
  click3:function(){
    console.log("点击view3");
  },
	...
})

second.wxss

.view1{
  height: 600rpx;
  width: 100%;
  background-color: #c3f3c3;
}
.view2{
  height: 400rpx;
  width: 80%;
  background-color: #f3c3f3;
}
.view3{
  height: 200rpx;
  width: 60%;
  background-color: gray;
}

2.1 bubbling event

当我们点击view3时候 发现 view1和view2事件也触发了

Click on the event, touch events, keep touching events are all bubbling event, in addition to these three events are non-bubbling event.

2.2 Binding events

bind绑定		： 	普通事件绑定
catch绑定	: 	绑定并阻止事件冒泡
区别 : 用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

Object 2.3 event

second.js 添加参数event并在控制台输出

	...
	click2:function(event){
	    console.log("点击view2");
	    console.log(event);
	  },
	click3:function(event){
	    console.log("点击view3");
	    console.log(event);
	  },	
	...

second.wxml 	添加id和自定义的数据

<view class="view1" bindtap="click1" id="view1">
  这个是view1
  <view class="view2" catchtap="click2" id="view2" data-title="view-title2">
    这个是view2
    <view class="view3" bindtap="click3" id="view3" data-id="view-id3">
      这个是view3
    </view>
  </view>
</view>

currentTarget: the current object that triggered the event, each output is binding view3 and view2 events
dateset: view2 in view3 and each defining data-id and data-title currentTarget.dataset can see in their respective events
target: the current trigger event source object, that view3

Other binding document View event details