微信小程序 --(3) 小程序事件处理专题+双向绑定

小程序事件处理

bindtap、bindinput、bindchange、

事件是视图层到逻辑层的通讯方式，它可以讲用户的行为反馈到逻辑层进行处理。

一、 事件类型：

在小程序中，事件类型分为2类： 冒泡事件、非冒泡事件

1. 冒泡事件

若为组件绑定了冒泡事件，当触发该事件时，将会向父节点执行冒泡。在小程序中： 12个

• 类型 触发条件
• touchstart： 手指触摸动作开始
• touchmove 手指触摸后移动
• touchcancel 手指触摸动作被打断，如来电提醒，弹窗
• touchend 手指触摸动作结束
• tap 手指触摸后马上离开
• longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
• longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
• transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
• animationstart 会在一个 WXSS animation 动画开始时触发
• animationiteration 会在一个 WXSS animation 一次迭代结束时触发
• animationend 会在一个 WXSS animation 动画完成时触发
• touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

2. 非冒泡事件

当一个组件上的事件被触发后，该事件不会向父节点传递。

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)
input、change、scroll …

二、 小程序事件绑定机制

<button  bind事件名=“事件处理函数名”></button>
<button  bind：件名=“事件处理函数名”></button>
<button  catch事件处理函数名”></button>

• bind方式绑定的事件可以应用于任何组件。
• : bind方式不能应用于某些原生组件
• bind方式和:bind方式的事件不能阻止事件冒泡，catch方式可以自动阻止事件冒泡、

原生组件

指 由操作系统直接控制的组件。如：获取焦点后的input，video组件, camera组件等等。原生组件的特点是由Android与IOS操作系统直接提供，并不是微信自己实现的UI。

小程序事件参数传递方式：

无论组件绑定的冒泡事件还是非冒泡事件，事件处理函数严禁出现小括号。

<button bindtap=”tapEvent”></button>
<button bindinput=”inputEvent”></button>

如果进行事件参数的传递？

非冒泡事件

对于非冒泡事件(自定义事件)，事件触发时涉及到的参数通常情况下会被微信API自动封装到event.detail 对象中。

<input bindinput=”inputEvent”></input>
<scroll-view bindscroll=”scrollEvent”></scroll-view>

inputEvent(event) {
  event.detail.value
}
scrollEvent(event){
}

冒泡事件

对于冒泡事件(原生事件)，参数传递的语法如下：

<button bindtap=”tapDel” data-index=”0”>删除</button>
<button bindtap=”tapDel” data-index=”0”>删除</button>
<button bindtap=”tapDel” data-index=”0”>删除</button>

//删除某一项
tapDel(){
  //拿到事件源对象 event.target
  let index = event.target.dataset.index;
}

需要把参数用dataset-*绑定到事件源对象中，这样就可以在事件处理函数中通过event.target事件源对象访问dataset属性（*dataset属性封装了事件源对象中所有的data-属性的名值对），进而访问dataset的属性index的值。

小程序表单组件的双向数据绑定：

双向数据绑定即是 input中的value属性值要与js中data里定义的变量动态绑定在一起。
视图层(wxml)一旦发生变化，那么逻辑层(js) data中的变量也会实时变化。反之，逻辑层data中的变量一旦发生变化，页面中所有引用了data的部分都需要动态更新。

1. 视图层(wxml)到逻辑层(js)的数据更新业务

<input bindinput=”doInput” />

data: {
  val: ''
}
doInput(){
  let val = event.detail.value
  // 第一种  这种方式可以修改val , 但是无法自动更新UI 
  this.data.val = val;
  // 第二种赋值方式  这种方式可以修改val并且更新UI
  this.setData({
    val: val,    // val: event,detail.value
});
}

2. 逻辑层(js) 到 视图层(wxml)的数据更新业务

data:{
  val: “15745842102”
}
<text>{{val}}</text>