微信小程序事件

什么是事件

事件

  • 一种用户行为
    当用户长按图片、拖动等
  • 一种通讯方式
    当用户进行触摸屏幕、点击按钮,事件发生在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都被点击了。

这就是catchbind的区别。

事件对象详解

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

//事件处理函数
  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。
这里写图片描述
展开其中一个事件。
这里写图片描述

currentTargettarget

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>

这里写图片描述

阅读更多
个人分类: 微信小程序
上一篇OpenStack基础学习
下一篇微信小程序的配置详解
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭