事件.png

一、什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。
• 事件可以把视图层的自定义属性值传到逻辑层。（data-***）在js中可以通过事件对象e中的dataset获取值。

二、事件类型
1.bindtap和catchtap的区别
(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的

2.小程序中事件分为冒泡事件和非冒泡事件

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递（bindtap）。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会像父节点传递（catchtap）。

三、小程序中的e.currentTarget与e.target

• e.currentTarget是事件绑定在哪个元素上（也就是这个事件在哪个组件上）
• e.target是tap点击事件触发的对象（也就是点击的是谁）

当我点击了标题title:

<view wx:for="{{item}}" wx:key="index" bindtap="toDetail" data-id="father>
   <view data-id="child">
      {{item.original_title}}
   </view>
</view>
currentTarget.id==>father
target.id==>child

情况一：

<view id="outer" bindtap="tap1">111
   <view id="middle" catchtap="tap2">222
        <view id="inner" bindtap="tap3">333</view>
   </view>
</view>
tap3: currentTarget.id===>inner
      target.id ===>inner   
tap2: currentTarget.id===>middle
      target.id===>inner

image.png

情况二：

<view id="outer" bindtap="tap1">111
   <view id="middle" bindtap="tap2">222
        <view id="inner" bindtap="tap3">333</view>
   </view>
</view>

image.png

自定义的属性

<view class="header-more" 
data-title="{{item.title}}"
bindtap="toMore">
查看更多
</view>

image.png