一、事件的类别:
当点击view3区域时:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/4abcdbf555c29f20bb56c5b89e8c5075.gif)
当点击view2区域时:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/02f2e9b1d82f281e12863518c7211683.gif)
当点击view1区域时:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/b789953eb3a4038f938c647294f98676.gif)
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/38e527e49a9ec718cf8c37e4f9174b09.gif)
点击view3区域后:
控制台详细信息:
- 点击事件:tap;
- 长按事件:longtap;
- 触摸事件:touchstart、touchend、touchmove、touchcancel;
- 其他:submit、input、scroll...
二、事件的分类:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。(点击事件、长按事件、触摸事件为冒泡事件)
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。(其他事件为非冒泡事件)
三、事件的绑定:事件绑定的写法同组件的属性,即key="value" 的形式。
- key以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本1.5.0起,bind和catch后可以紧跟一个冒号,含义不变,如bind:tap、catch:touchstart。
- value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。
- 注意
- bind事件绑定不会阻止冒泡事件向上冒泡
- catch事件绑定可以阻止冒泡事件向上冒泡。
四、事件的对象:
- 如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
- 事件对象属性主要包括:
- type:代表事件的类型
- timeStamp:页面打开到触发事件所经过的毫秒数
- target:触发事件的源组件
- currentTarget:事件绑定的当前组件
- touches:一个数组,每个元素为一个 Touch 对象,表示当前停留在屏幕上的触摸点
- changedTouches:数据格式同 touches,表示有变化的触摸点
- detail:自定义事件所携带的数据,点击事件的detail 带有的 x, y,代表距离文档左上角的距离
- target与currentTarget下的属性:
- id:事件源组件的id
- tagName:当前组件的类型
- dataset:在组件中可以自定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)
- touches与changedTouches下的属性:
- identifier:触摸点的标识符
- pageX, pageY:距离文档左上角的距离,文档的左上角为原点,横向为X轴,纵向为Y轴
- clientX, clientY:距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
-------------------------------bind与catch的区别
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/6b8d557377401228c1a04d50662b2311.gif)
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/4abcdbf555c29f20bb56c5b89e8c5075.gif)
当点击view2区域时:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/02f2e9b1d82f281e12863518c7211683.gif)
当点击view1区域时:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/b789953eb3a4038f938c647294f98676.gif)
- 当view3的事件绑定改为:catchtap='clickView3'时,点击view3区域,只会打印clickView3
-------------------------------事件对象
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/38e527e49a9ec718cf8c37e4f9174b09.gif)
点击view3区域后:
![微信小程序之事件 微信小程序之事件](https://i-blog.csdnimg.cn/blog_migrate/0236808ddc75f6b7690b40822019139d.gif)
控制台详细信息: