事件系统

事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替，绑定事件的方式有两种：

• 第一种方式：bind:事件名，bind后面需要跟上冒号，冒号后面跟上事件名，例如：<view bind:tap="fnName"></view>
• 第一种方式：bind事件名，bind后面跟上事件名，例如：<view bindtap="fnName"></view>

事件分类以及阻止事件冒泡

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
• 使用bind绑定的事件，会触发事件冒泡，如果阻止事件冒泡，可以使用catch绑定事件。

事件传参

在组件上通过data-*的形式绑定事件处理函数的参数，可以在事件处理函数中通过event.currentTarget.dataset.参数名获取到参数的值。

• currentTarget事件绑定者，也就是指：哪个组件绑定了当前的事件处理函数。
• target事件触发者，也就是指：哪个组件触发了当前的事件。
• 在组件上使用mark:自定义属性的方式将数据传递给事件处理函数，例如：<view mrk:id="100" bindtap="handler">，然后通过事件对象进行获取自定义事件，例如event.mark.name。

setData()

修改对象类型数据

• 新增单个、多个属性

  this.setData({
    "userInfo.name": "张三",
    "userInfo.age": 18
  })

• 修改单个、多个属性

  this.setData({
     "userInfo.name": "李四",
  })
  // 修改多个属性可以使用ES6提供的展开运算符和object.assign()方法
  
  const userInfo ={
    ...this.data.userInfo,
    name: "李四",
    age: 18
  }
  this.setData({userInfo})

• 删除单个、多个属性

  //删除单个属性
  delete this.data.userInfo.name
  this.setData({userInfo:this.data.userInfo})
  
  //删除多个属性
  const {age,test,...rest} = this.data.userInfo
  this.setData({rest})

修改数组类型数据

• 新增数组元素

  this.data.list.push(4)
  this.setData({list:this.data.list})
  ```

• 修改数组元素

  this.setData({'list[0]':1})
  this.setData({'list[1].name':'张三'zal})

• 删除数组元素