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

ゞ浴缸里的玫瑰 2022-05-15 07:53 780阅读 0赞

## 简述 ##

由于微信小程序开发不同于以往的普通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
          })
      },

## 效果 ##

我提前在`cur`class中添加了样式.   
![这里写图片描述][SouthEast]

**注意:**

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`可以用来实现[事件委托][Link 1](事件委托可以通过监听父级来达到监听子级的效果，减少了监听器的数量，使用内存也相对减少。)，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，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][https_blog.csdn.net_c_kite_article_details_72899520]

[SouthEast]: /images/20220515/80176d322f4a41c38d4baf7c7b372c67.png
[Link 1]: https://www.jianshu.com/p/ac47521806d2
[https_blog.csdn.net_c_kite_article_details_72899520]: https://blog.csdn.net/c_kite/article/details/72899520