【小程序】获取到的e.target与e.currentTarget区别

在html中这两个事件属性，很容易让我混淆，小程序中这两个属性也很重要，因此又必要好好深入理解下，让自己分清这两个Dom的属性。

MDN：

target:一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。

currentTarget:在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

举个例子吧：

<swiper indicator-dots='true' indicator-active-color='#fff'> 
        <swiper-item wx:for="{{list}}" wx:key='index' data-id='{{item.Id}}' bindtap='navigatorActive'>
          <text>测试</text>
        </swiper-item>
</swiper>

这里的list Json数据为：[{“Id”:1,url:'xxx},{“Id”:2,url:‘xxx’},{“Id”:3,title:‘xxx’}]

这里我想根据点击的swiper获取到dataset的值跳转到不同的页面，但是这里我给swiper-item了一个点击事件获取到值：

这里可以看到只有currentTarget能够给我想要的dataset值，而target中的dataset为空对象；在看下一个

<swiper indicator-dots='true' indicator-active-color='#fff'> 
        <swiper-item wx:for="{{list}}" wx:key='index' data-id='{{item.Id}}' bindtap='navigatorActive'>
          <image src='{{item.ImgUrl}}' data-id='1111'></image>
        </swiper-item>
</swiper>

给swiper中的image的data中存放一个1111,结果：

这里获取currentTarget依然有值，而target中的dataset变成我们设置的data-id。

这时在看看MDN中的解释，就能想到事件冒泡的原因。

这里swiper-item是image的父元素，给父元素添加事件监听，e.target指向引发触发事件的元素，点击了image的时候e.target指向的是image，所以第一次获取到的值为空对象，而第二次给image添加了data属性的时候，获取到的dataset值不在是空对象，而是我们设置的值
然后由于事件冒泡，通过image事件冒泡到swiper上,swiper上又添加了监听事件而达到了给image添加监听事件的效果，而e.currentTarget指向的是给绑定事件监听的那个对象，即swiper-item所以第一次就可以获取到所要的dataset值。
↓
↓
↓
↓
#总结：

• 如果你点击的是添加事件元素的子元素，就用e.currentTarget来获取父元素的值，用e.target来获取子元素的值，如果没有子元素，就在本元素就不用说了，e.target===e.currentTarget
• e.target 指向的是触发事件监听的对象。
• e.currentTarget 指向的是添加监听事件的对象。

参考：Difference between e.target and e.currentTarget