Bind 与 Catch：事件绑定的两种方式

在微信小程序中，我们可以通过 Bind 或 Catch 来为元素绑定事件。Bind（事件绑定）是在元素上直接绑定事件处理函数，当事件发生时，直接调用该函数。而 Catch（事件委托）是在父元素上绑定事件处理函数，当子元素发生事件时，父元素的事件处理函数被调用。

<!-- Bind -->
<button bindtap="onTap">点击我</button>

<!-- Catch -->
<view catchtap="onTap">
  <button>点击我</button>
</view>

事件对象 target 与 currentTarget：指向触发事件的元素

在事件处理函数中，我们可以通过事件对象来获取有关事件的信息，包括触发事件的元素、事件类型等。target 属性指向触发事件的元素，而 currentTarget 属性指向当前正在处理事件的元素。

onTap(e) {
  console.log(e.target)  // 触发事件的元素
  console.log(e.currentTarget)  // 当前正在处理事件的元素
}

target 与 currentTarget 的区别

target 和 currentTarget 属性指向的元素通常是相同的，但在某些情况下，它们可能是不同的。例如，当我们为父元素绑定事件，而子元素触发事件时，target 属性指向子元素，而 currentTarget 属性指向父元素。

<view catchtap="onTap">
  <button>点击我</button>
</view>

onTap(e) {
  console.log(e.target)  // <button>点击我</button>
  console.log(e.currentTarget)  // <view>...</view>
}

何时使用 Bind 与 Catch

Bind 和 Catch 都是事件绑定的有效方式，但它们适用于不同的场景。一般来说，当我们想要直接在元素上处理事件时，可以使用 Bind。当我们想要在父元素上处理子元素的事件时，可以使用 Catch。

结语

Bind 和 Catch 是微信小程序中事件绑定的两种重要方式。理解它们的区别有助于我们更好地开发小程序，提高代码的可读性、可维护性和性能。

拓展阅读

• 微信小程序事件系统
• 事件对象