Skip to content

Commit 29fcbf8

Browse files
schengyischengyi
committed
事件处理详情
1 parent 70389da commit 29fcbf8

3 files changed

Lines changed: 137 additions & 54 deletions

File tree

‎pages/home/home.js‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,64 @@
11
// pages/home/home.js
22
Page({
3-
4-
/**
5-
* 页面的初始数据
6-
*/
73
data: {
8-
4+
titles: ['衣服','裤子','鞋子']
95
},
10-
11-
/**
12-
* 生命周期函数--监听页面加载
13-
*/
14-
onLoad: function (options) {
15-
6+
handlBtnClick(){
7+
console.log('按钮发生了点击')
168
},
17-
18-
/**
19-
* 生命周期函数--监听页面初次渲染完成
20-
*/
21-
onReady: function () {
22-
9+
handleTouchStart(){
10+
console.log('handleTouchStart')
2311
},
24-
25-
/**
26-
* 生命周期函数--监听页面显示
27-
*/
28-
onShow: function () {
29-
12+
handleTouchMove() {
13+
console.log('handleTouchMove')
3014
},
31-
32-
/**
33-
* 生命周期函数--监听页面隐藏
34-
*/
35-
onHide: function () {
36-
15+
handleTouchEnd() {
16+
console.log('handleTouchEnd')
3717
},
38-
39-
/**
40-
* 生命周期函数--监听页面卸载
41-
*/
42-
onUnload: function () {
43-
18+
handleTap() {
19+
console.log('handleTap')
4420
},
45-
46-
/**
47-
* 页面相关事件处理函数--监听用户下拉动作
48-
*/
49-
onPullDownRefresh: function () {
50-
21+
handleLongPress(){
22+
console.log('handlLongPress')
5123
},
52-
53-
/**
54-
* 页面上拉触底事件的处理函数
55-
*/
56-
onReachBottom: function () {
57-
24+
handleEvenClick(event){
25+
console.log(event)
26+
},
27+
handleEventEnd(event){
28+
console.log('+++++',event)
29+
},
30+
handleInner(event){
31+
console.log(event)
32+
},
33+
handleOuter(event){
34+
console.log(event)
35+
},
36+
handleItemClick(event){
37+
console.log(event)
38+
// title - index
39+
const dataset = event.currentTarget.dataset;
40+
const title = dataset.item;
41+
const index = dataset.index;
42+
console.log(title,index)
5843
},
5944

60-
/**
61-
* 用户点击右上角分享
62-
*/
63-
onShareAppMessage: function () {
64-
45+
// 事件冒泡和事件捕获
46+
handleCaptureView1(){
47+
console.log("handleCaptureView1")
48+
},
49+
handleBindView1(){
50+
console.log("handleBindView1")
51+
},
52+
handleCaptureView2() {
53+
console.log("handleCaptureView2")
54+
},
55+
handleBindView2() {
56+
console.log("handleBindView2")
57+
},
58+
handleCaptureView3() {
59+
console.log("handleCaptureView3")
60+
},
61+
handleBindView3() {
62+
console.log("handleBindView3")
6563
}
6664
})

‎pages/home/home.wxml‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,41 @@
11
<!--pages/home/home.wxml-->
2-
<text class="title">hello world</text>
3-
<button size="mini">按钮</button>
2+
<!-- 1.事件处理的回顾 -->
3+
<button bindtap="handlBtnClick" size="mini">按钮</button>
4+
<button bind:tap="handlBtnClick" size="mini">按钮</button>
5+
<button catch:tap="handlBtnClick" size="mini">按钮</button>
6+
7+
<!-- 2.常见的一些事件 -->
8+
<!-- touchcancle在某些特定场景下才会触发(比如来电打断) -->
9+
<!-- tap事件和longpress事件通常只会触发一个 -->
10+
<view class="box" bind:touchstart="handleTouchStart" bind:touchmove="handleTouchMove" bind:touchend="handleTouchEnd" bind:tap="handleTap" bind:longpress="handleLongPress"></view>
11+
12+
<!-- 3.事件对象的分析 -->
13+
<button id="btn" size='mini' bind:tap="handleEvenClick" bind:touchend="handleEventEnd">事件对象</button>
14+
15+
<view class="outer" id="outer" bind:tap="handleOuter">
16+
外层的view
17+
<view class="inner" id='inner' bind:tap='handleInner'>内层的view</view>
18+
</view>
19+
20+
<!-- 4.事件的传递参数 -->
21+
<view class="container">
22+
<block wx:for="{{titles}}" wx:key="{{index}}">
23+
<view class="item"
24+
bind:tap="handleItemClick"
25+
data-index="{{index}}"
26+
data-item="{{item}}">
27+
{{item}}
28+
</view>
29+
</block>
30+
</view>
31+
32+
<!-- 5.事件冒泡和事件捕获 - catch和bind的区别 -->
33+
<!-- bind: 一层层传递 -->
34+
<!-- catch：阻止事件的进一步传递 -->
35+
<view class="view1" capture-bind:tap="handleCaptureView1" bindtap="handleBindView1">
36+
<view class="view2" capture-bind:tap="handleCaptureView2" bindtap="handleBindView2">
37+
<view class="view3" capture-bind:tap="handleCaptureView3" bindtap="handleBindView3">
38+
39+
</view>
40+
</view>
41+
</view>

‎pages/home/home.wxss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,51 @@
22
.title{
33
color: red;
44
font-size: 30px;
5+
}
6+
7+
.box{
8+
width: 300rpx;
9+
height: 300rpx;
10+
background: orange;
11+
}
12+
13+
.outer{
14+
width: 400rpx;
15+
height: 400rpx;
16+
background: red;
17+
color: white
18+
19+
}
20+
.inner{
21+
width: 200rpx;
22+
height: 200rpx;
23+
background: blue;
24+
color: white
25+
}
26+
27+
.container{
28+
display: flex;
29+
}
30+
31+
.item{
32+
flex:1;
33+
text-align: center;
34+
}
35+
36+
.view1{
37+
width: 600rpx;
38+
height: 600rpx;
39+
background: red;
40+
}
41+
42+
.view2{
43+
width: 400rpx;
44+
height: 400rpx;
45+
background: blue;
46+
}
47+
48+
.view3{
49+
width: 200rpx;
50+
height: 200rpx;
51+
background: green
552
}

0 commit comments

Comments
 (0)