小程序——事件绑定,冒泡和非冒泡

本文详细解析了事件绑定的不同形式,包括普通绑定、阻止冒泡绑定及捕获阶段绑定,并阐述了冒泡与捕获的区别。同时介绍了各种事件类型及其应用,如bindtap、bindlongtap等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

绑定形式,冒泡和捕获的区别

bind:普通绑定(事件会冒泡),bindtap或者bind:tap形式
catch:绑定并阻止事件冒泡,catchtap或者catch:tap形式
capture-bind:捕获阶段绑定(后续捕获和冒泡会继续执行),只有capture-bind:tap一种形式
capture-catch:中断捕获阶段和取消冒泡阶段,capture-catch:tap,只会执行最外层事件
冒泡是由内到外(子传父),捕获是由外到内(父传子)
bindtap形式

<button bindtap="addSwitch">点击添加按钮</button>

bind:tap形式

<button bind:tap="addSwitch">点击添加按钮</button>

catchtap形式

<button catchtap="addSwitch">点击添加按钮</button>

catch:tap形式

<button catch:tap="addSwitch">点击添加按钮</button>

touchstarttouchstarttouchstarttouchstart手指触摸的开始、移动、结束和打断

<view class="touchTest" bind:touchstart="handlerTS" bind:touchstart="handlerTM" 
bind:touchstart="handlerTE" bind:touchstart="handlerTC">事件类型测试</view>

绑定事件

事件对象可以携带额外的信息,触发事件时可获取,如id,dataset,touches
一般元素
bindtap----手指触摸之后马上离开
bindlongtap----长按,手指触摸后,超过350ms再离开
bindtouchcancel----手指触摸动作被打断,如来电提醒、弹窗
bindtouchstart----手指触摸动作开始
bindtouchmove----手指触摸后移动
bindtouchend----手指触摸动作结束
input-----监听内容的输入事件
change----CheckBox的勾选事件
表单元素
bindsubmit----携带 form 中的数据触发 submit 事件
bindreset----表单重置时会触发 reset 事件

冒泡事件

在这里插入图片描述

非冒泡事件

非冒泡事件:form的submit事件;input的input事件;scroll-view的scroll事件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值