前言

首先，在微信小程序中每一个组件（标签）都有一个公共属性bind* ，而这个公共属性就是可以让我们为组件（标签）去绑定事件处理函数的。

另外，这个属性是在bind后带有一个星号，而这个星号是说明了，将要绑定的具体事件的名字，所以，这个属性是通过bind与一个事件名字组合而成的，而这些事件的名字是什么，具体如何使用。

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

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

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

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

在组件中绑定一个事件处理函数。

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

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

2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。表单事件和自定义事件通常是非冒泡事件

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等不同的组件⽀持不同的事件，具体看组件的说明即可。

信小程序的事件类别：

• tap：点击事件

• input：输入事件

• longtap：长按事件；

• touchstart：触摸开始；

• touchend：触摸结束；

• touchcansce：取消触摸；

  注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数
  注2：小程序中默认绑定为单向绑定

一、 条件渲染

1. wxml

<input bindinput="handleInput" />

2. page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

3. 特别注意

1、绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2、事件传值 通过标签⾃定义属性的⽅式 和 value

<input bindinput="handleInput" data-item="100" />

3、事件触发时获取数据

 handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }