在微信小程序开发中,事件是视图层到逻辑层的通信方式,通过给组件绑定事件,可以监听用户的操作行为,然后在对应的事件处理函数中进行相应的业务处理。例如,为页面中的按钮绑定事件,当用户点击按钮时,就产生了事件。
需要注意的是,微信小程序中的事件分为冒泡事件和非冒泡事件。当一个组件上的事件被触发后,该事件会向父组件传递,这类事件为冒泡事件;
当一个组件上的事件被触发后,该事件不会向父组件传递,这类事件为非冒泡事件。在表中,点击事件、长按事件、触摸事件都属于冒泡事件,其他事件属于非冒泡事件。
| 类别 | 事件名称 | 触发条件 |
|---|---|---|
| 点击事件 | tap | 手指触摸马上离开 |
| 长按事件 | longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 |
| 触摸事件 | touchstart | 手指触摸动作开始 |
| touchmove | 手指触摸后移动 | |
| touchcancel | 手指触摸动作被打断,例如来电提醒、弹窗 | |
| touchend | 手指触摸动作结束 | |
| 其他事件 | input | 键盘输入时触发 |
| submit | 携带form组件中的数据触发submit事件 |
若要为组件绑定事件,可以通过为组件添加“bind+事件名称”属性或“catch+事件名称”属性来完成,属性的值为事件处理函数,当组件的事件被触发时,会主动执行事件处理函数。bind和catch的区别在于,bind不会阻止冒泡事件向上冒泡,而catch可以阻止冒泡事件向上冒泡。
为组件绑定事件后,可以将事件处理函数定义在Page({})中,下面进行代码演示。
<buttonbindtap="compare">比较</button>
上述代码中,bindtap表示绑定tap事件。在触屏手机中,tap事件在用户手指触摸button组件离开后触发,而在微信开发者工具中,tap事件在鼠标单击button组件时触发。
然后在Page({})中定义compare()函数,具体代码如下。
Page({ compare: function () { console.log('比较按钮被单击了') }, })
在上述代码中,compare()函数用于在控制台输出“比较按钮被单击了”。
单击“比较”按钮,控制台输出的结果如图所示。
从图可以看出,compare()函数执行成功了。