小程序 ——wx:for读取组件id的三种形式（e.target与e.currentTarget的区别）

参考文章1：【小程序】获取到的e.target与e.currentTarget区别
参考文章2：【微信小程序】e.target.id和e.currentTarget.dataset.id的区别

一、绑定到整个view上读取id

场景如下：
数据库中存在这样一个唯一标识符来标识这一订单在数据库中的字段名叫Oid用户点击完毕后让订单状态发生改变，需要将id的值传到后端数据库进行状态的修改。

用户在点击整个view框时会读取到这个框的id（也就是Oid） 适用于：不刻意去要求框内包含的元素组件，只要点击整个元素就可以

代码如下：（只贴xml和js的部分）
xml部分：注意此处关键点是bindtap=“changcc”事件的触发

  <view wx:for="{{postList1}}" wx:for-item="item" wx:for-index="index" wx:key="{{index}}" bindtap="changeacc" data-item='{{item}}' >
      //中间内容省略
      </view>

js部分：

	changcc:function(e){
    var name = e.currentTarget
    console.log(e.currentTarget)
    }

让我们在控制台看一下输出的效果

自然按照数组的形式想要获取Oid写成e.currentTarget.dataset.item.Oid的形式
js修改如下：

	changcc:function(e){
    var name =e.currentTarget.dataset.item.Oid
    }

此时输出台输出Oid 98

二、在view下面的的text标签中读取id

在开发过程中 会出现这样一个场景
以修改地址为例：

和上文第一种想法一样，想要获取每个view的唯一Aid（Aid是数据库中对于地址的唯一标识字段），但是子元素上没有绑定Aid，只有整个view上才有。所以用e.currentTarget来获取父元素的值，用e.target来获取子元素的值。

xml和js代码如下：
xml：

    <view class="addresslist_22" bindtap="alteraddress" >
      <text data-id="{{item.Aid}}">修改收货地址</text>
    </view>

注意此处的id放在view下面的text中 用addresslist_22这个样式来框住按钮，并绑定alteraddress事件

js：

alteraddress: function (e) {
    e.target === e.currentTarget
    var name = e.target.dataset.id
    console.log(name) 
    }

看一下输出台的输出结果

建议先写出父子元素继承的基本形式e.target === e.currentTarget其他的形式每个都输出（console.log(变量名)） 根据每个的输出形式写
例如：我先写完e.currentTarget，然后进行输出

alteraddress: function (e) {
    console.log(e.currentTarget) 
    }

可以看到控制台中没有和id有关的信息，所以要进行id的传递，用到e.target === e.currentTarget

js中：

alteraddress: function (e) {
    e.target === e.currentTarget
    console.log(e.target)  
    }

控制台结果如下：

可以看到dataset中已经可以读到id，因为输出是类似数组的形式，自然想到如果想获取到id可写成e.target.dataset.id的形式

所以就可以得到最开始第二种方法的js代码

alteraddress: function (e) {
    e.target === e.currentTarget
    var name = e.target.dataset.id
    console.log(name) 
    }

三、（优化）button按钮的id获取

在做第二个模块的时候就想到既然都是按钮形式能不能直接绑定button按钮，但是不同的是事件也直接绑定在button上（在第二种方法中式绑定在text外层的view中）
xml和js代码如下：

xml：

            <button class="accorder_67" bindtap="changeaff" id="{{items.Oid}}"> 
            	确认送达 
            </button>

js：

    var name = e.currentTarget.id;
    console.log(e.currentTarget)
    console.log(name)

看下控制台输出：

可以看到因为 不是在view而是在button上绑定了事件，所以不需要e.target === e.currentTarget来传递 所以还是直接用e.currentTarget就可以，再利用方法二中的“傻瓜”方法每个输出，然后确定最后的值。

四、button绑定多条信息

在第三点中，button绑定id可以返回id值，但如果除了这个我们还想绑定这个组件包含的其他值 就可以用这个方法，还是之前的例子，直接上代码
xml：

  <button  class="substitution_68" wx:else  bindtap="confirmorder"   id="{{item.Oid}}" data-op="{{item.Op2}}">
  		确认送达
  </button>

js：

    var name = e.currentTarget.id;
    var Op2=e.currentTarget.dataset.id
    console.log(e.currentTarget)

看下控制台输出情况

可以看到在前端中不同的写法对应了不同的输出方式
用 id="{{items.Oid}}"，js中对应的是 e.currentTarget.id;
用data-id="{{items.Oid}}",js中对应的是e.currentTarget.dataset.id

五、总结

（声明：只是经验总结，原理其实还不是特别明白）
1.直接的view或者button的事件绑定和id获取 直接用e.currentTarget然后进行输出，根据输出的值获取id

2.在子元素中的 用e.target===e.currentTarget进行值的传递，再据输出的值获取id
3.用 id="{{items.Oid}}"，js中对应的是 e.currentTarget.id;
用data-id="{{items.Oid}}",js中对应的是e.currentTarget.dataset.id