微信小程序之事件

一、事件的类别：

1. 点击事件：tap;
2. 长按事件：longtap;
3. 触摸事件：touchstart、touchend、touchmove、touchcancel;
4. 其他：submit、input、scroll...

二、事件的分类：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。（点击事件、长按事件、触摸事件为冒泡事件）
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。（其他事件为非冒泡事件）

三、事件的绑定：事件绑定的写法同组件的属性，即key="value" 的形式。

1. key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，含义不变，如bind:tap、catch:touchstart。
2. value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。
3. 注意

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

四、事件的对象：

• 如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
• 事件对象属性主要包括：

1. type：代表事件的类型
2. timeStamp：页面打开到触发事件所经过的毫秒数
3. target：触发事件的源组件
4. currentTarget：事件绑定的当前组件
5. touches：一个数组，每个元素为一个 Touch 对象，表示当前停留在屏幕上的触摸点
6. changedTouches：数据格式同 touches，表示有变化的触摸点
7. detail：自定义事件所携带的数据，点击事件的detail 带有的 x, y，代表距离文档左上角的距离

• target与currentTarget下的属性：

1. id：事件源组件的id
2. tagName：当前组件的类型
3. dataset：在组件中可以自定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)

• touches与changedTouches下的属性：

1. identifier：触摸点的标识符
2. pageX, pageY：距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
3. clientX, clientY：距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

-------------------------------bind与catch的区别

           

         

当点击view3区域时：
        
当点击view2区域时：
        
当点击view1区域时：
        

• 当view3的事件绑定改为：catchtap='clickView3'时，点击view3区域，只会打印clickView3

-------------------------------事件对象

        

        

点击view3区域后：

        

控制台详细信息：