快應(yīng)用 通用事件

通用事件，即所有組件都支持的?事件回調(diào)?

開發(fā)者可以在組件標(biāo)簽上使用?on{eventName}?（如?onclick?）或?@{eventName}?（如?@click?）注冊(cè)回調(diào)事件

更詳細(xì)的講解，可查閱 事件綁定文檔 了解

示例代碼

<template>
  <div>
      <text onclick="clickFunction1">line 1</text>
      <text @click="clickFunction2">line 2</text>
  </div>
</template>

通用事件列表：

關(guān)于冒泡

1040+ 版本對(duì)某些通用事件開放了冒泡功能，這些事件的響應(yīng)行為與之前版本差異較大。因此為了兼容之前版本，開發(fā)者需要在 manifest.json 中將 minPlatformVersion 設(shè)置為 1040 或以上，才會(huì)啟用這類通用事件的冒泡功能。

關(guān)于事件冒泡及阻止事件冒泡詳細(xì)案例，請(qǐng)參考：事件監(jiān)聽

事件對(duì)象

1、TouchEvent 類型說明：

其中，TouchList 是 Touch 對(duì)象的集合。

2、Touch 類型說明：

3、MouseEvent 類型說明：

示例：

如下，在 div 上綁定了 click 和 touchmove 事件，觸發(fā)事件時(shí)將事件打印出來。

<template>
  <div class="root-page">
    <div class="touch-region" onclick="click" ontouchmove="move"></div>
  </div>
</template>

<style>
  .root-page {
    flex-direction: column;
    align-items: center;
  }

  .touch-region {
    width: 80%;
    height: 20%;
    background-color: #444444;
  }

</style>

<script>
  export default {
    private: {},
    click(event) {
      console.log("click event fired")
    },
    move(event) {
      console.log("move event touches:" + JSON.stringify(event.touches))
      console.log("move event changedTouches:" + JSON.stringify(event.changedTouches))
    }
  }

</script>

打印結(jié)果如下，click 事件：

move event touches:[
  {
    "offsetX": 296,
    "identifier": 0,
    "offsetY": 113.48148345947266,
    "clientY": 113.48148345947266,
    "clientX": 360,
    "pageY": 113.48148345947266,
    "pageX": 360
  }
]

move event changedTouches:[
  {
    "offsetX": 296,
    "identifier": 0,
    "offsetY": 113.48148345947266,
    "clientY": 113.48148345947266,
    "clientX": 360,
    "pageY": 113.48148345947266,
    "pageX": 360
  }
]

click event fired