微信小程序初探之事件绑定

83 阅读2分钟

在微信小程序开发中,事件是视图层到逻辑层的通信方式,通过给组件绑定事件,可以监听用户的操作行为,然后在对应的事件处理函数中进行相应的业务处理。例如,为页面中的按钮绑定事件,当用户点击按钮时,就产生了事件。

需要注意的是,微信小程序中的事件分为冒泡事件和非冒泡事件。当一个组件上的事件被触发后,该事件会向父组件传递,这类事件为冒泡事件;

当一个组件上的事件被触发后,该事件不会向父组件传递,这类事件为非冒泡事件。在表中,点击事件、长按事件、触摸事件都属于冒泡事件,其他事件属于非冒泡事件。

类别事件名称触发条件
点击事件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({   comparefunction () {     console.log('比较按钮被单击了')   },   })

在上述代码中,compare()函数用于在控制台输出“比较按钮被单击了”。

单击“比较”按钮,控制台输出的结果如图所示。

image.png

从图可以看出,compare()函数执行成功了。