小程序事件之bind 、catch 、capture-bind和capture-catch的区别
2023-06-13 09:15:18 时间
小程序事件之bind 、catch 、capture-bind和capture-catch的区别
事件分类
事件分为冒泡事件和非冒泡事件
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
事件的绑定:
bind和catch都是用来绑定事件的,与 bind
不同, catch
会阻止事件向上冒泡
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
上例中,点击 inner view 会先后调用handleTap3
和handleTap2
(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2
,点击 outer view 会触发handleTap1
事件的捕获阶段
\1. 事件是有两个阶段的:捕获阶段 和 冒泡阶段, 且捕获阶段位于冒泡阶段之前。
\2. 在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反
\3. 在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段
示例:
点击 inner view 会先后调用handleTap2
、handleTap4
、handleTap3
、handleTap1
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
如果把上面的代码改成如下,将只会触发handleTap2
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
转载自:
相关文章
- 深入理解Spring事件机制(二):事件的推送[通俗易懂]
- React技巧之处理tab页关闭事件
- drag事件
- 触摸事件 touchstart、touchmove、touchend
- 【愚公系列】2022年10月 微信小程序-优购电商项目-⼩程序事件的绑定
- 两个try catch引起的对JS事件循环的思考
- 微信小程序阻止事件冒泡
- [android] 点击事件的四种写法详解手机开发
- onbeforeunload事件详解编程语言
- ABAP程序中的事件详解编程语言
- Linux 事件驱动机制:强化程序的响应能力(linux事件机制)
- 济南华联回应阿里女员工被侵害事件:涉事员工停职调查
- “阿里女员工疑遭性侵事件”女方律师:警方尚未立案 仍在调查
- XMLDOM对象方法:对象事件
- ASP.Net防止刷新自动触发事件的解决方案
- 表单元素事件(FormElementEvents)
- Win2003的事件跟踪程序关闭与显示的方法(组策略与注册表)
- jquery触发a链接点击事件解决方案
- 解读在C#中winform程序响应键盘事件的详解
- js获取事件源及触发该事件的对象
- C#程序窗体间使用回调事件方式通讯示例
- jquery中交替点击事件toggle方法的使用示例