微信小程序篇】三. 微信小程序的事件

事件

项目准备

1. 创建项目demo3，
2. 操作步骤同demo2
3. 不过first目录可以改为second目录（也可以将index目录里的子文件的内容删了）

1. 事件的类别

1. tap 手指触摸后马上离开
2. 触摸事件
   • touchstart 手指触摸动作开始
   • touchend 手指触摸动作结束
   • touchmove 手指触摸后移动
   • touchcancel 手指触摸动作被打断，如来电提醒，弹窗
3. 持续触摸事件
   • longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
   • longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
4. 其他事件详情查看文档

2.事件案例

案例准备

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 冒泡事件

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

点击事件，触摸事件，持续触摸事件都属于冒泡事件，除了这三种事件都属于非冒泡事件。

2.2 事件的绑定

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

2.3 事件的对象

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：当前触发事件的对象，输出都是各自绑定事件的view3和view2
dateset：在view3和view2中各自定义了data-id和data-title 可以在各自的事件中 currentTarget.dataset查看
target： 当前触发事件的源对象，即view3

其他绑定事件详情查看文档