微信小程序使用

1. bind

复制代码

或

1. catch

复制代码

前缀绑定事件，语法如下：

1. <组件 bind事件名="处理函数" catch事件名="处理函数"></组件>

复制代码

• 1. bind

  复制代码
  ：事件绑定，允许事件冒泡（向父组件传递）。
  
• 1. catch

  复制代码
  ：事件绑定，阻止事件冒泡（不会向父组件传递）。
  

一、常见事件类型

事件名说明适用组件

1. tap

复制代码

点击事件

1. view

复制代码

,

1. button

复制代码

1. input

复制代码

输入框内容变化

1. input

复制代码

,

1. textarea

复制代码

1. submit

复制代码

表单提交

1. form

复制代码

1. scroll

复制代码

滚动事件

1. scroll-view

复制代码

1. longpress

复制代码

长按事件（350ms）

1. view

复制代码

,

1. button

复制代码

二、事件绑定示例


1. 点击事件（bindtap / catchtap）

1. <!-- 点击事件（允许冒泡） -->
   
2. <view bindtap="handleTap">点击我</view>
   
3. <!-- 阻止冒泡 -->
   
4. <view catchtap="handleNoBubbleTap">点击我（不冒泡）</view>

复制代码

1. Page({
   
2.   handleTap() {
   
3.     console.log("点击事件触发");
   
4.   },
   
5.   handleNoBubbleTap() {
   
6.     console.log("点击事件触发，但不会冒泡");
   
7.   }
   
8. });

复制代码

2. 输入事件（bindinput）

1. <input bindinput="handleInput" placeholder="输入内容" />

复制代码

1. Page({
   
2.   handleInput(e) {
   
3.     console.log("输入内容：", e.detail.value);
   
4.   }
   
5. });

复制代码

3. 表单提交（bindsubmit）

1. <form bindsubmit="handleSubmit">
   
2.   <input name="username" placeholder="用户名" />
   
3.   <button form-type="submit">提交</button>
   
4. </form>

复制代码

1. Page({
   
2.   handleSubmit(e) {
   
3.     console.log("表单数据：", e.detail.value);
   
4.   }
   
5. });

复制代码

三、事件对象（event）

事件处理函数的参数

1. event

复制代码

包含以下关键属性：
属性说明

1. type

复制代码

事件类型（如

1. tap

复制代码

,

1. input

复制代码

）

1. target

复制代码

触发事件的组件（原始事件源）

1. currentTarget

复制代码

当前绑定事件的组件

1. detail

复制代码

额外信息（如输入框的值）

1. timeStamp

复制代码

事件触发时间戳

1. touches

复制代码

触摸点信息（多指触控）
获取 data-* 自定义数据

1. <view data-id="123" bindtap="handleDataTap">点击获取 data-id</view>

复制代码

1. Page({
   
2.   handleDataTap(e) {
   
3.     const id = e.currentTarget.dataset.id; // 123
   
4.     console.log("data-id:", id);
   
5.   }
   
6. });

复制代码

四、阻止事件冒泡（catch vs bind）

• 1. bind

  复制代码
  ：允许事件向上冒泡（父组件也会触发相同事件）。
  
• 1. catch

  复制代码
  ：阻止事件冒泡（仅当前组件触发）。
  

示例

1. <view bindtap="parentTap">
   
2.   <view catchtap="childTap">点击我（不会触发父组件的 tap）</view>
   
3. </view>

复制代码

1. Page({
   
2.   parentTap() {
   
3.     console.log("父组件点击"); // 不会执行（因为子组件用了 catchtap）
   
4.   },
   
5.   childTap() {
   
6.     console.log("子组件点击");
   
7.   }
   
8. });

复制代码

五、自定义组件事件（triggerEvent）

如果使用自定义组件，可以通过

1. triggerEvent

复制代码

触发父组件的事件：
子组件

1. Component({
   
2.   methods: {
   
3.     handleTap() {
   
4.       this.triggerEvent("customevent", { data: "Hello" });
   
5.     }
   
6.   }
   
7. });

复制代码

父组件

1. <child bindcustomevent="handleCustomEvent" />

复制代码

1. Page({
   
2.   handleCustomEvent(e) {
   
3.     console.log("自定义事件数据：", e.detail.data); // "Hello"
   
4.   }
   
5. });

复制代码

六、总结

场景推荐写法普通点击事件

1. bindtap="handleTap"

复制代码

阻止冒泡

1. catchtap="handleTap"

复制代码

表单输入

1. bindinput="handleInput"

复制代码

表单提交

1. bindsubmit="handleSubmit"

复制代码

自定义组件通信

1. triggerEvent + bind事件名

复制代码

到此这篇关于微信小程序事件绑定基本语法的文章就介绍到这了,更多相关微信小程序事件绑定基本语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339410jzd.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！