阻止事件向下传递_微信小程序事件绑定及冒泡的理解

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

视图层&＃xff0c;字面理解即可&＃xff0c;即小程序界面视图层

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

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

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

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

事件分为冒泡事件和非冒泡事件&＃xff1a;

1. 冒泡事件&＃xff1a;当一个组件上的事件被触发后&＃xff0c;该事件会向父节点传递。

2. 非冒泡事件&＃xff1a;当一个组件上的事件被触发后&＃xff0c;该事件不会向父节点传递。

bind事件绑定不会阻止冒泡事件向上冒泡&＃xff0c;catch事件绑定可以阻止冒泡事件向上冒泡。

注意catch事件绑定可以阻止冒泡事件向上冒泡。这是关键&＃xff0c;现在上代码&＃xff1a;

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

console&＃xff1a;

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