前言

前面我曾写过一篇介绍微信小程序实现二级菜单的小教程，里面留下了一个坑，那就是关于小程序里的事件，当时并没有过多介绍。

对于新人来说，bind与catch、event对象里的target与currentTarget是一道门槛，需要我们花点心思去搞明白它们的区别，在工作中才能灵活运用，提高开发效率。

好了，接下来开始详细介绍它们的区别。

案例

我们从下面的例子来对事件进行详细说明

代码

wxml

1
2
3
4
5
6
7
8
9
10
11
12

<view class="fl-row" bindtap="parent" data-str="我是最外层的父级">
    <view class='item' data-str="我是红色部分">
        <view class="li" data-str="我是蓝色部分">
            <text class='text' catchtap="child" data-str="我是产品">产品</text>
        </view>
    </view>
    <view class='item'>
        <view class="li">
            <text class='text'>空间</text>
        </view>
    </view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.fl-row {
  display: flex;
  flex-direction: row;
  margin: 20rpx 0 0 0;
}
.li{
  background: blue;
}
.text{
 background: yellow;
}
 .item {
  flex: 1;
  text-align: center;
  font-weight: bold;
  padding: 50rpx 0;
  background: red;
}

javascript

1
2
3
4
5
6
7
8

parent: function (e) {
  console.log(e);
  console.log("触发了bindTap事件");
},
child: function (e) {
  console.log(e);
  console.log("触发了catchTap事件");
}

测试

1. 点击黄色的文字部分，打印结果如图所示

可以看到，触发了catchtap事件，event对象里target与currentTarget的自定义数据str打印的结果都是“我是产品”。

2. 点击蓝色部分，打印结果如图所示

这次，触发了bindtap事件，target打印结果为“我是蓝色部分”，currentTarget打印结果为“我是最外层的父级”。没有在蓝色的<view>添加任何事件，却触发了绑定在父级的bindtap事件，这就是冒泡事件的机制，js里可以利用冒泡进行事件代理，把事件代码写在父级，在父级内的元素，就算是后来动态添加进去的元素，也会触发该事件。

3. 点击红色部分，打印结果如图所示

最后，触发了bindtap事件，target打印结果为“我是红色部分”，currentTarget打印结果为“我是最外层的父级”。

事件详解

事件分类

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

微信小程序中的冒泡事件(2.1.1)

微信小程序大多都是冒泡事件，优先发生最里面容器设置的事件，然后发生父容器设置的事件

bind与catch区别

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

target与currentTarget

总结

• event.target指的是触发事件的源组件。点击时所处位置最里面的那个容器 (捕获到最里面时)
• event.currentTarget 指的是事件绑定的当前组件。点击事件设置的那个容器。(冒泡到最外面时)

测试结果分析

再次回到测试结果

1. 点击黄色

target的目标是触发事件的源组件，这里是黄色文字，currentTarget目标是设置事件的最外层父级。因为文字部分绑定了catchtap事件，catch事件会阻止事件冒泡，因此事件在文字点击后不会继续往上传递。target与currentTarget打印结果都是“我是产品”。

2. 点击蓝色
   target的目标是触发事件的源组件，这里是蓝色背景，因此target打印结果为“我是蓝色”。currentTarget目标是设置事件的最外层父级，bind事件不阻止事件冒泡。currentTarget打印结果为“我是最外层父级”。

3. 点击红色
   点击红色与点击蓝色时同理。

bind与catch、event对象里的target与currentTarget的讲解到这里就结束了。不知道大家有没有对事件有更深一步的理解了呢？

参考

• 微信小程序官方文档–事件