WeApp: Event

 20th August 2020 at 2:19pm

事件机制

Simple Example

<!-- page.wxml -->
<view id="outer" catch:tap="handleTap">
  <view id="inner">点击我</view>
</view>
Page({
  handleTap: function(e) {
	  console.log(e)
  }
})

currentTarget 总是指向事件绑定的元素,而 target 则是事件发生时所在的元素。比如 tap 事件在 #inner 上发生,但是最终冒泡到 #outer 上才被事件处理函数执行,因此 currentTarget#outertarget#inner

bind, catch, capture-bind, capture-catch

这些都用来做事件绑定,如 bind:touchstartcapture-catch:touchstart

bind 不会阻止事件向上冒泡,catch 会。

capture- 头的,会在事件捕获阶段被执行,而不是在事件冒泡阶段。看看 MDN 上对于捕获和冒泡的介绍。看看微信官方 文档 对这块的描述。现代浏览器都采用在冒泡阶段执行事件处理函数。