先来理解一下什么叫事件。

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(1)

视图层,字面理解即可,即小程序界面视图层

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(2)

它的程序在.wxml文件中,事件是视图层到逻辑层的通讯方式,可以理解为.wxml文件到 .js文件这一层的通讯方式。

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(3)

事件可以将用户的行为(.wxml中的bindtap点击行为)反馈到逻辑层处理(.js中对应的处理函数),事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

而事件对象携带的额外信息可以在开发者工具的console中了解:

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(4)

当然不同类型的事件(type:”tap”和type:”touch”)所携带的对象也不尽相同,这一点在上几篇文章《由console.log()窥探事件处理函数的参数》中已经有介绍。

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

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

2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

注意catch事件绑定可以阻止冒泡事件向上冒泡。这是关键,现在上代码:

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(5)

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(6)

其中中间那父节点是catch事件绑定,当点击son view按键时

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(7)

console:

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(8)

子节点向父节点冒泡时,在父节点遇到catch事件绑定,阻止事件冒泡,所以冒泡停留在父节点这一层,输出 son father;当中间的父节点这层换成bind事件绑定后,son view按键不再阻止冒泡,事件一直到最上级父节点,也就时爷爷层才停止。

微信小程序什么是事件处理函数(微信小程序事件绑定及冒泡的理解)(9)

,