前情提要

给event对象传递id

• 给event对象传递id（id="btn"）：<button id="btn" bindtap="handleTap">点我一下</button>
• 从event对象中获取id（e.target.id）： handleTap(e){ console.log(e.target.id); }

给event对象传递自定义属性

• 给event对象传递自定义属性（data-type="confirm_btn"）：<button data-type="confirm_btn" bindtap="handleTap">点我一下</button>
• 从event对象中获取自定义属性（e.target.dataset.type）： handleTap(e){ console.log(e.target.dataset.type); }

小程序项目

向event对象传递id

代码涉及的主要文件有：

1. app.json
2. pages/index/index.wxss
3. pages/index/index.wxml
4. pages/index/index.js

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "登录中心",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12

pages/index/index.wxss

.container{
  padding: 20rpx;
}
.container .title{
  padding: 20rpx 0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 32rpx;
}
.list{
  margin: 40rpx auto 20rpx;
}
.item{
  margin: 12rpx 0;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
}
.item input{
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}
button{
  font-weight: normal;
  font-size: 28rpx!important;
  color: #fff;
  background: #0149af;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

pages/index/index.wxml

<view class="container">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" id="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password id="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini">登录</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

pages/index/index.js

Page({
  data:{
    username:"",
    password:""
  },
  handleInput(e){
    const type = e.target.id;
    this.setData({
      [type]:e.detail.value
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

向event对象传递自定义属性

代码变更涉及到文件有：

1. pages/index/index.wxml
2. pages/index/index.js

pages/index/index.wxml

<view class="container">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini">登录</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

pages/index/index.js

Page({
  data:{
    username:"",
    password:""
  },
  handleInput(e){
    const type = e.target.dataset.type;
    this.setData({
      [type]:e.detail.value
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

相关链接

通过事件绑定实现动画效果
微信小程序的事件绑定