[TOC] # 1.事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 ## 类型 触发条件 最低版本 | touchstart | 手指触摸动作开始 | |---|---| | touchmove | 手指触摸后移动 | |touchcancel |手指触摸动作被打断，如来电提醒，弹窗| |touchend |手指触摸动作结束 |tap| 手指触摸后马上离开 |longpress| 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个|事件，tap事件将不被触发 1.5.0 longtap |会在 WXSS transition 或 wx.createAnimation 动画结束后触发 animationstart |会在一个 WXSS animation 动画开始时触发 animationiteration |会在一个 WXSS animation 一次迭代结束时触发 animationend |会在一个 WXSS animation 动画完成时触发 touchforcechange |在支持 3D Touch 的 iPhone 设备，重按时会触发 > 注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如`<form/>`的submit事件，`<input/>`的input事件，`<scroll-view/>`的scroll事件，(详见各个组件) # 2.事件绑定和冒泡 > 事件绑定的写法同组件的属性，以 key、value 的形式。如: bindtap="jump" ## 原生组件 catchtap bindtap ## 自基础库版本 1.5.0 起，在非原生组件中 bind:tap catch:tap ## 什么是事件冒泡 > 事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签 > bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 ``` <view id="outer" bindtap="handleTap1"> 爷爷 //只调用爷爷 bind对下不影响 <view id="middle" catchtap="handleTap2"> 爸爸 <view id="inner" bindtap="handleTap3"> 儿子 //点击儿子会先后调用儿子和爸爸 bind 向上冒泡 </view> </view> </view> ``` # 3.事件对象 ## target 触发事件的源组件。 | 属性 | 类型| 说明| |---|---|---| | id | String |事件源组件的id |tagName| String |当前组件的类型 |dataset |Object |事件源组件上由data-开头的自定义属性组成的集合 ## currentTarget 事件绑定的当前组件 属性 |类型 |说明 |---|---|---| id |String |当前组件的id tagName| String |当前组件的类型 dataset |Object |当前组件上由data-开头的自定义属性组成的集合 ## target和currentTarget 的区别 > target 正在被点击的组件 currentTarget 指事件(catchtap )捕获的组件 ### catchtap事件 ``` //wxml <view class='parent' catchtap='parent' data-title= "parenttitle"> <view class='child' data-title="childtitle"></view> <!-- catchtap 可以阻止事件冒泡 bindtap 不可以阻止 --> </view> ``` ``` //js parent(event){ // console.log(event.target.dataset.title); //点击子 childtitle 点击父是 parenttltie console.log(event.currentTarget.dataset.title) //点击父子都是parenttitle }, child(event){ console.log("child") } ``` ### bindtap事件冒泡后的target 和currentTarget ``` //wxml <view class='parent' catchtap='parent' data-title= "parenttitle"> <view class='child' data-title="childtitle" bindtap="child"></view> <!-- catchtap 可以阻止事件冒泡 bindtap 不可以阻止 --> </view> ``` ``` //js parent(event){ // console.log(event.target.dataset.title); //点击子 child childtitle 点击父是 parenttltie targe指向点击事件 console.log(event.currentTarget.dataset.title) //点击父是parenttitle 点击子是child parenttitle 因为bind会向上冒泡,而currentTarget指向绑定事件所以是parenttitle }, child(event){ console.log("child") } ```