wx-------事件处理

什么是事件

• 事件是视图层到逻辑层的通讯方式。

• 事件可以将用户的行为反馈到逻辑层进行处理。

• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

• 事件对象可以携带额外信息，如 id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件：

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

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

  WXML的冒泡事件列表：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开（点击）

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，  

普通事件绑定

事件绑定的写法类似于组件的属性，语法如下：

冒泡事件：<组件 bind事件名="函数名"></组件>
非冒泡事件：<组件 catch事件名="函数名"></组件>

//js
函数名(){}

<view bindtap="demo">
  点我试试
  <view bindtap="child">试试就试试</view>
</view>

//ES6写法
demo(){
    console.log('儿子我是你爸爸');
},
child(){
    console.log('我有爸爸了');
},

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

<view bindtap="demo">
  点我试试
  <view catchtap="child">试试就试试</view>
</view>

事件传参

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

• data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；

• data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

<view 
bindtap="getParams" 
data-id="8090" 
data-user="{{user}}"
data-user-name="admin">
    事件传参
</view>

data: {
    user:'张三'
  },
  //参数的传递
  getParams(e){
    console.log(e);
    console.log(e.target.dataset.id);
  },

setData方法(非侵入式修改，vue属于侵入式)

//视图同步修改
this.setData({
    flag:!this.data.flag
});

//this.flag=!this.flag

setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

<button type="primary" bindtap="change">点击切换显示隐藏</button>
<view class="box" wx:if="{{flag}}"></view>

小案例

点击的当前元素添加背景颜色

<view wx:for="{{arr}}" class="{{index===num?'bg':''}}" data-index="{{index}}" bindtap="changeBg" >
  {{item}}
</view>

data: {
    num: 0,
    arr: ['周六', '周日', '周五', '周四', '周三'],
  },
  //给点击的当前行添加背景颜色
  changeBg(e) {
    //点击当前行的时候获取index下标，赋值给data数据里面的num
    this.setData({
      num: e.target.dataset.index
    })
  },