事件.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
