Transfer data to event object in wechat applet

Antecedents feed

to event Object delivery id

• to event Object delivery id（id="btn"）：<button id="btn" bindtap="handleTap"> Click on me </button>
• from event Get in object id（e.target.id）： handleTap(e){ console.log(e.target.id); }

to event Object passing custom attributes

• to event Object passing custom attributes （data-type="confirm_btn"）：<button data-type="confirm_btn" bindtap="handleTap"> Click on me </button>
• from event Get custom attributes from object （e.target.dataset.type）： handleTap(e){ console.log(e.target.dataset.type); }

Applet project

towards event Object delivery id

The main files involved in the code are ：

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": " Login Center ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

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;
}

pages/index/index.wxml

<view class="container">
  <view class="title"> Sign in </view>
  <view class="list">
    <view class="item">
      <input type="text" id="username" bindinput="handleInput" placeholder=" user name " />
    </view>
    <view class="item">
      <input type="text" password id="password" bindinput="handleInput" placeholder=" password " />
    </view>
  </view>
  <button size="mini"> Sign in </button>
</view>

pages/index/index.js

Page({
    
  data:{
    
    username:"",
    password:""
  },
  handleInput(e){
    
    const type = e.target.id;
    this.setData({
    
      [type]:e.detail.value
    })
  }
})

towards event Object passing custom attributes

The files involved in the code change are ：

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

pages/index/index.wxml

<view class="container">
  <view class="title"> Sign in </view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder=" user name " />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder=" password " />
    </view>
  </view>
  <button size="mini"> Sign in </button>
</view>

pages/index/index.js

Page({
    
  data:{
    
    username:"",
    password:""
  },
  handleInput(e){
    
    const type = e.target.dataset.type;
    this.setData({
    
      [type]:e.detail.value
    })
  }
})

Related links

Achieve animation effect through event binding
Event binding of wechat applet