微信小程序事件绑定基本语法示例详解

时间：2025-07-21 09:12:40|栏目：JavaScript|点击：次

微信小程序使用 bind 或 catch 前缀绑定事件，语法如下：

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

一、常见事件类型

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

Page({
  handleTap() {
    console.log("点击事件触发");
  },
  handleNoBubbleTap() {
    console.log("点击事件触发，但不会冒泡");
  }
});

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

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

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

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

事件处理函数的参数 event 包含以下关键属性：

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

Page({
  handleDataTap(e) {
    const id = e.currentTarget.dataset.id; // 123
    console.log("data-id:", id);
  }
});

示例

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

Page({
  parentTap() {
    console.log("父组件点击"); // 不会执行（因为子组件用了 catchtap）
  },
  childTap() {
    console.log("子组件点击");
  }
});

如果使用自定义组件，可以通过 triggerEvent 触发父组件的事件：

子组件

Component({
  methods: {
    handleTap() {
      this.triggerEvent("customevent", { data: "Hello" });
    }
  }
});

父组件

1	`<child bindcustomevent="handleCustomEvent"` `/>`

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