微信小程序事件

什么是事件
事件类别
事件冒泡
事件绑定
事件对象详解

什么是事件

事件

一种用户行为
当用户长按图片、拖动等
一种通讯方式
当用户进行触摸屏幕、点击按钮，事件发生在UI层，UI层将信息发送给逻辑代码

事件的类别

点击事件 tap
长按事件 longtap
触摸事件 touchstart touchend touchmove touchcancel

touchend：手指触摸到手指离开，是正常的触摸结束
touchcancel：突然来了电话，页面被覆盖，等同于触摸事件被打断

其他 submit input

事件冒泡

<!--index.wxml-->
<!--index.wxml-->
<view class="view1" bindtap='view1Click'>
    view 1
    <view class="view2" bindtap='view2Click'>
         view 2
         <view class="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>

/**index.wxss**/
.view1 {
  height: 500rpx;
  width: 100%;
  background-color: khaki;
}
.view2 {
  height: 400rpx;
  width: 80%;
  background-color: rosybrown;
}
.view3 {
  height: 300rpx;
  width: 60%;
  background-color: firebrick;
}

//事件处理函数
  view1Click:function() {
    console.log("view1Click")
  },
  view2Click: function () {
    console.log("view2Click")
  },
  view3Click: function () {
    console.log("view3Click")
  },

点击view3 ，控制台的输出如下：

这种现象就叫冒泡事件，当我们点击一个子view的时候，它也会触发父view及父view的父view的被点击，所以控制台会连续提示三次点击事件。
点击，长按，触摸属于冒泡事件，其余的事件为非冒泡事件。

事件绑定

bind绑定
catch绑定

上面我们的代码是用bindtap进行绑定的，如果换成catchtap进行事件绑定

<!--index.wxml-->
<view class="view1" bindtap='view1Click'>
    view 1
    <view class="view2" bindtap='view2Click'>
         view 2
         <view class="view3" catchtap='view3Click'>
            view 3
         </view>
    </view>
</view>

点击view3，只显示了view3被点击。

点击view2，显示view2view1都被点击了。

这就是catch和bind的区别。

事件对象详解

我们触发一个事件时，可以把该事件传递给相应的事件处理函数，下面我们将事件对象打印出来。

//事件处理函数
  view1Click:function(event) {
    console.log("view1Click")
    console.log(event)
  },
  view2Click: function (event) {
    console.log("view2Click")
    console.log(event)
  },
  view3Click: function (event) {
    console.log("view3Click")
    console.log(event)
  },

点击view3。
这里写图片描述
展开其中一个事件。

`currentTarget`和 `target`

currentTarget是被点击的view， target是目标的view，下面给各view设置id就可以说明清楚了。

<!--index.wxml-->
<view class="view1" id="view1" bindtap='view1Click'>
    view 1
    <view class="view2" id="view2" bindtap='view2Click'>
         view 2
         <view class="view3" id="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>

现在再点击view3，view3、view2和view1被点击打印出的事件分别如下。
这里写图片描述

可以看出target是触发事件源的组件，currentTarget是事件绑定的组件。

`dataset`

目前我们的dataset内容都为空，这个数据从哪里来，又有什么用呢。
这里写图片描述
dataset是为了方便我们给view添加上我们自己制定的属性和数据。

<view class="view1" id="view1" bindtap='view1Click' data-title="新闻标题" data-id="100">
    view 1
    <view class="view2" id="view2" bindtap='view2Click'>
         view 2
         <view class="view3" id="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>

这里写图片描述