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

<组件 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);
  }
});

<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("子组件点击");
  }
});

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

<child bindcustomevent="handleCustomEvent" />

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