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

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

<组件 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 包含以下关键属性：

<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" });
    }
  }
});

父组件

<child bindcustomevent="handlecustomevent" />

page({
  handlecustomevent(e) {
    console.log("自定义事件数据：", e.detail.data); // "hello"
  }
});