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