微信小程序 事件

什么是事件:

事件是渲染层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。同时,事件也可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。在我们使用的时候事件也可以携带额外信息,如id,dataset,touches等一系列的信息。此外,事件还是连同WXML组件和javascript的桥梁。

 举个例子:

事件相关的属性:

  • 以bind开头的属性是组件绑定的不阻止冒泡的函数。
  • 以catch开头的属性是组件绑定的阻止冒泡的函数。
  • 以data绑定的属性会随着事件传递到函数中去。

借助这些属性我们完成了这些事件整体的绑定和事件的流程。

事件的应用场景:

  • 用户操作:用户点击,用户长按, 
  • 小程序状态:小程序启动,页面加载完成,小程序进入后台等。

事件类型:

事件类型可以分为组件独有事件通用事件。组件独有事件根据组件的类型各有不同,通用事件可以应用于所有的事件。

常见的通用事件一共有11种:

touchstart事件用于监听用户手指触摸动作的开始。当用户触摸到我们的组件时,我们就可以监听到touchstart事件。

touchmove事件用于监听用户手指触摸移动事件。用户的手指已经点在类我们组件上,然后手指发生了移动,我们就可以监听到touchmove事件。

touchcancel事件用于用户触摸动作被打断的情况。

touchend事件用于用户触摸操作的结束。

tap事件用于监听用户触摸后马上离开的情况。

longpress和longtap事件都用于监听用户触摸后超过350ms再离开。如果该事件被指定了回调函数,则不会触发tap事件。在使用时推荐使用longpress事件。

transitionend事件用于监听wxss transition或wx.createAnimation动画结束。

Animationstart事件在一个WXSS animation动画开始时触发。

Animationiteration动画一次迭代后触发。

Animationend动画结束后触发。

当事件回调触发时,会收到一个事件对象,对象的详细信息如下:

事件绑定:

想要组件响应特定的事件,就需要将事件绑定在组件上。事件绑定的写法和组件属性一致,以key="value"的形式绑定;

 bind和catch:

bind事件绑定不会阻止冒泡事件往上冒泡,简单来说,bind所绑定的事件对应会向上传递,让自己的父组件响应对应的事件。而catch事件会把对应的事件阻拦在自己这里,只有自己能够响应对应事件。

冒泡事件:

除了上文提到的以外的自定义事件,如无声明,均为非冒泡事件,如form的submit事件,input的input事件等。

tap等用户触摸引发的事件时冒泡事件,其它事件大多时非冒泡事件。

冒泡规则:

猜你喜欢

转载自blog.csdn.net/Abudula__/article/details/81221160