小程序动态添加class 以及 点击捕获currentTarget和target的区别

简述

由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.

说明

通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,

//wxml
<view class="list-wrapper">
      <view class="list-top">
         <view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
         <view data-num="2" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
         <view data-num="3" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
      </view>
</view>

//js
menuClick:function(e){
      this.setData({
         _num:e.target.dataset.num
      })
  },

效果

我提前在curclass中添加了样式. 

注意:

currentTarget和target的区别:

target和currentTarget的区别是：

target：触发事件的元素(冒泡到父级)。
currentTarget：事件绑定的元素(不会冒泡,点谁就是谁)。

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了；

例如：
<ul id="ulT">
<li class="item1">fsda</li>
<li class="item2">ewre</li>
<li class="item3">qewe</li>
<li class="item4">xvc</li>
<li class="item5">134</li>
</ul>
<script type="text/javascript">
document.getElementById("ulT").onclick = function  (event) {
console.log(event.target);
console.log(event.currentTarget);
}
</script>

currentTarget始终是监听事件者，而target是事件的真正发出者。

我们知道，e.target可以用来实现事件委托(事件委托可以通过监听父级来达到监听子级的效果，减少了监听器的数量，使用内存也相对减少。)，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target指向引发触发事件的元素，如上述的例子中，e.target指向用户点击的li，由于事件冒泡，li的点击事件冒泡到了ul上，通过给ul添加监听事件而达到了给每一个li添加监听事件的效果，而e.currentTarget指向的是给绑定事件监听的那个对象，即ul，从这里可以发现，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。

 

转自:https://blog.csdn.net/c_kite/article/details/72899520