一、事件的介绍
- 什么时候会产生事件呢?
- 小程序需要经常和用户进行某种 交互 ,比如点击界面上的某个按钮或者区域,比如滑动了某个区域
- 这些交互都会产生各种各样的 事件
- 事件时如何处理呢?
- 事件是通过 bind/catch 这个属性绑定在组件上的(和普通的属性写法很相似 , 以 key=“value” 形式);
- key 以 bind 或 catch 开发 , 从 1.5.0 版本开始 , 可以在 bind 和 catch 后加上一个冒号;
- 同时在当前页面的 Page 构造器中定义对应的事件处理函数 tapName, 如果没有对应的函数 , 触发事件时会报错;
- 当用户点击该 button 区域时,达到触发条件生成事件 tap ,该事件处理函数 tapName 会被执行,同时还会收到一个事件对象 event。
二、事件的简单演练
三、常见事件类型
- 某些组件 会有自己特性的 事件类型, 大家可以在使用组件时具体查看对应的文档
- 比如 input 有 bindinput/bindblur/bindfocus 等
- 比如 scroll-view 有 bindscrolltowpper/bindscrolltolower 等
- 这里我们讨论 几个组件都有的 , 并且也 比较常见的事件类型:
四、事件类型演练
- 事件类型的演练
- 有两个注意点:
- Touchcancle: 在某些特定场景下才会触发(比如来电打断等)
- tap 事件 和 longpress 事件通常只会触发其中一个
五、事件对象介绍
当某个事件触发时 , 会产生一个 事件对象 , 并且这个对象被传入到回调函数中 , 事件对象有哪些常见的属性呢?
六、touches和 changedTouches 的区别
- 在 touchend 中不同
- 多手指触摸时不同
七、currentTarget和 target 的区别
八、事件参数的传递
- 当视图层发生事件时,某些情况需要事件 携带一些参数到执行的函数 中, 这个时候就可以通过 data-属性 来完成:
- 格式: data-属性 的名称
- 获取: e.currentTarget.dataset. 属性 的名称
九、参数传递的练习
十、事件冒泡和事件捕获
当界面产生一个事件时,事件分为了 捕获阶段 和 冒泡阶段 。
十一、代码演练
十二、代码示例
home.wxml:
<!--pages/home/home.wxml-->
<!-- 1.事件处理的回顾 -->
<button bind:tap="handleBtnClick" size="mini">按钮</button>
<button bind:tap="handleBtnClick" size="mini">按钮</button>
<button catch:tap="handleBtnClick" size="mini">按钮</button>
<!-- 2.常见的一些事件 -->
<view class="box" bind:touchstart="handleTouchStart"bind:touchmove="handleTouchMove" bind:touchend="handleTouchEnd" bind:tap="handleTap" bind:longpress="handleLongPress"></view>
<!-- 3.事件对象的分析 -->
<button id="btn" size="mini" bindtouchend="handleEventEnd" bindtap="handleEventClick">事件对象</button>
<view class="outer" id="outer" bindtap="handleOuter">
外层的view
<view class="inner" id="inner" bindtap="handleInner">内层的view</view>
</view>
<!-- 4.事件的参数传递 -->
<view class="container">
<block wx:for="{{titles}}" wx:key="{{index}}">
<view class="item" bindtap="handleItemClick" data-index="{{index}}" data-item="{{item}}">{{item}}</view>
</block>
</view>
<!-- 5.事件冒泡和事件捕获、catch和bind的区别 -->
<!-- bind:一层一层传递 -->
<!-- catch:阻止事件的进一步传递 -->
<view class="view1" capture-bind:tap="handleCaptureView1" bindtap="handleBindView1">
<view class="view2" capture-catch:tap="handleCaptureView2" bindtap="handleBindView2">
<view class="view3" capture-bind:tap="handleCaptureView3" bindtap="handleBindView3"></view>
</view>
</view>
home.wxss:
/* pages/home/home.wxss */
.title{
color:red;
font-size: 30px;
}
.box{
width: 300rpx;
height: 300rpx;
background-color: orange;
}
.outer{
width: 400rpx;
height: 400rpx;
background-color: orange;
}
.inner{
width: 200rpx;
height: 200rpx;
background-color: palegreen;
}
.view1{
width: 600rpx;
height: 600rpx;
background-color: palegreen;
}
.view2{
width: 400rpx;
height: 400rpx;
background-color: paleturquoise;
}
.view3{
width: 200rpx;
height: 200rpx;
background-color: papayawhip;
}
home.js:
// pages/home/home.js
Page({
data: {
titles: ["衣服", "裤子", "鞋子"]
},
handleBtnClick() {
console.log("按钮发生点击");
},
handleTouchStart() {
console.log("handleTouchStart");
},
handleTouchMove() {
console.log("handleTouchMove");
},
handleTouchEnd() {
console.log("handleTouchEnd");
},
handleTap() {
console.log("handleTap");
},
handleLongPress() {
console.log("handleLongPress");
},
handleEventClick(event) {
console.log("----------", event)
},
handleEventEnd(event) {
console.log("++++++++++++", event);
},
handleInner(event) {
console.log(event)
},
handleOuter(event) {
console.log(event)
},
handleItemClick(event) {
console.log(event)
const dataset = event.currentTarget.dataset;
const index = dataset.index;
const title = dataset.item;
console.log(dataset);
console.log(index);
console.log(title);
},
//事件冒泡和事件捕获
handleCaptureView1() {
console.log("handleCaptureView1");
},
handleBindView1() {
console.log("handleBindView1");
},
handleCaptureView2() {
console.log("handleCaptureView2");
},
handleBindView2() {
console.log("handleBindView2");
},
handleCaptureView3() {
console.log("handleCaptureView3");
},
handleBindView3() {
console.log("handleBindView3");
},
})