13-事件对象e

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

      {{item.original_title}}
   

currentTarget.id==>father
target.id==>child

情况一：

111
   222
        333
   

tap3: currentTarget.id===>inner
      target.id ===>inner   
tap2: currentTarget.id===>middle
      target.id===>inner

假如我点击了tap3，因为bind会冒泡触发父级盒子tap2的事件，但是又因为tap2是catch会阻止向上冒泡；

image.png

情况二：

111
   222
        333
   

假如我点击了tap3，因为是冒泡会依次执行tap2和tap1

image.png

自定义的属性

查看更多

image.png