小程序组件 —— 31 事件系统 - 事件绑定和事件对象

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

• bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名，例如：<view bind:tap="fnName"></view>
• bind 事件名，bind 后面直接跟上事件名，例如：<view bindtap="fnName"></view>

事件处理函数需要写到 .js 文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数；

下面在微信开发者工具中演示一下：

• 选择 cate 文件夹下面的 cate.wxml 文件，分别填写两种事件绑定方法：

  <button type="primary" bind:tap="handleClick">绑定事件</button><button type="warn" bindtap="handleClick">绑定事件</button>
  

• 选择 cate 文件夹下面的 cate.js 文件，填写对应的事件函数，注意事件函数必须填写在 Page 方法中：

  Page({handleClick () {console.log("点击事件触发了")}
  })
  

编辑完成刷新后，点击按钮，可以在 console 界面看到打印的信息，如下图：

当组件触发事件时，绑定的事件处理函数会收到一个事件对象；在触发事件的时候，事件处理程序会默认给事件处理函数添加一个参数，默认命名为 event，所以我们的事件处理函数可以写为：

	Page({handleClick (event) {// console.log("点击事件触发了");console.log(event);}})

具体表现如下：

在点击按钮之后，console 区域会输出一个对象，这个对象记录了事件触发时的一些信息，我们可以使用这个对象来获取相关的数据；

假如我们想获取用户在输入框输入的信息，先在 cate.wxml 中添加一个输入框：

<!-- 在小程序中，input 输入框默认没有边框，需要自己添加样式 -->
<input type="text" bindinput="getInputValue" />

由于小程序中的 input 输入框默认没有边框，所以可以在根目录的 app.scss 中统一对 input 组件设置样式，如下：

input {border: 1px solid #cccccc;
}

接着在 cate.js 文件中添加事件处理函数，如下：

Page({getInputValue(event){console.log(event.detail.value);}
})

具体的效果如下所示：

在 input 输入信息后，在 console 窗口实时看到具体的输出；

参考视频：尚硅谷微信小程序开发教程