快應(yīng)用 事件監(jiān)聽與觸發(fā)

了解事件監(jiān)聽API，如何觸發(fā)ViewModel的事件、組件節(jié)點(diǎn)的事件

通過本節(jié)，你將學(xué)會：

• 監(jiān)聽與移除監(jiān)聽事件：$on()、$off
• 觸發(fā)ViewModel事件：$emit()
• 監(jiān)聽原生組件事件
• 觸發(fā)原生組件事件：$emitElement()

教程文檔對應(yīng)的項(xiàng)目代碼文件：src/BindEvents目錄

監(jiān)聽與移除監(jiān)聽事件

$on 用于監(jiān)聽自定義事件；$off移除對應(yīng)的事件監(jiān)聽

$on(evtName, fnHandler)

在當(dāng)前頁面注冊監(jiān)聽事件， 可監(jiān)聽$emit()、 $dispatch()、 $broadcast()等觸發(fā)的自定義事件，不能用于注冊組件節(jié)點(diǎn)的事件響應(yīng)

示例如下：

 export default {
    onInit(){
      this.$on('customEvtType1', this.customEvtType1Handler)
    },
    customEvtType1Handler(evt){
      // 事件類型，事件參數(shù)
      console.info(`觸發(fā)事件：類型：${evt.type}, 參數(shù)： ${JSON.stringify(evt.detail)}`);
    }
  }

$off(evtName, fnHandler)

移除事件監(jiān)聽，參數(shù) fnHandler 為可選，傳遞僅移除指定的響應(yīng)函數(shù)，不傳遞則移除此事件的所有監(jiān)聽

示例如下：

 export default {
    removeEventHandler () {
      // 不傳遞fnHandler：移除所有監(jiān)聽
      this.$off('customEvtType1')
      // 傳遞fnHandler：移除指定的監(jiān)聽函數(shù)
      this.$off('customEvtType1', this.customEvtType1Handler)
    }
  }

觸發(fā)ViewModel事件

頁面的交互中可能會遇到一些非手動觸發(fā)的需求，$emit() 通過觸發(fā)當(dāng)前實(shí)例上的事件達(dá)到動態(tài)觸發(fā)事件的行為

$emit(evtName, evtDetail)

觸發(fā)當(dāng)前實(shí)例監(jiān)聽事件函數(shù)，與 $on() 配合使用

注意：$emit() 目前只觸發(fā) $on 所監(jiān)聽的事件

示例如下：

 export default {
    emitEvent () {
      this.$emit('customEvtType1', { params: '參數(shù)內(nèi)容' })
    }
  }

監(jiān)聽原生組件事件

原生組件支持一系列事件，如通用事件（如：click, disappear）、組件專有事件（如：focus）；

很多開發(fā)者希望能夠在事件回調(diào)函數(shù)中，獲取到當(dāng)前觸發(fā)組件的信息，并進(jìn)行進(jìn)一步的操作，那么辦法有以下多種，如下代碼所示：

1. 在響應(yīng)函數(shù)執(zhí)行時通過target獲取，如：onClickHandler
2. 在響應(yīng)函數(shù)綁定時傳遞參數(shù)，如：onClickHandler2

示例如下：

<template>
  <div class="tutorial-page">
    <text id="elNode1" item-flag="{{ argName + 1 }}" onclick="onClickHandler">組件節(jié)點(diǎn)1</text>
    <text id="elNode2" item-flag="{{ argName + 2 }}" onclick="onClickHandler2('參數(shù)1', argName)">組件節(jié)點(diǎn)2</text>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
</style>

<script>
  export default {
    data () {
      return {
        argName: '動態(tài)參數(shù)'
      }
    },
    onClickHandler (evt) {
      // 事件類型，參數(shù)詳情
      console.info(`觸發(fā)事件：類型：${evt.type}, 詳情： ${JSON.stringify(evt.detail)}`);

      if (evt.target) {
        console.info(`觸發(fā)事件：節(jié)點(diǎn)：${evt.target.id}, ${evt.target.attr.itemFlag}`)
      }
    },
    onClickHandler2 (arg1, arg2, evt) {
      // 事件類型，事件參數(shù)，target
      console.info(`觸發(fā)事件：類型：${evt.type}, 參數(shù)： ${arg1}, ${arg2}`);
    }
  }
</script>

觸發(fā)原生組件事件

除了用戶手動操作觸發(fā)事件，響應(yīng)回調(diào)之外；開發(fā)者可以在代碼中通過$emitElement()完成事件的動態(tài)觸發(fā)

$emitElement(evtName, evtDetail, id)

可以觸發(fā)指定組件id的事件，通過evt.detail獲取傳遞的參數(shù)；該方法對自定義組件無效

示例如下：

<template>
  <div class="tutorial-page">
    <text onclick="emitElement">觸發(fā)組件節(jié)點(diǎn)的事件：click</text>
    <text id="elNode1" item-flag="{{ argName + 1 }}" onclick="onClickHandler">組件節(jié)點(diǎn)1</text>
    <text id="elNode2" item-flag="{{ argName + 2 }}" onclick="onClickHandler2('參數(shù)1', argName)">組件節(jié)點(diǎn)2</text>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
</style>

<script>
  export default {
    data () {
      return {
        argName: '動態(tài)參數(shù)'
      }
    },
    onClickHandler (evt) {
      // 事件類型，參數(shù)詳情
      console.info(`觸發(fā)事件：類型：${evt.type}, 詳情： ${JSON.stringify(evt.detail)}`);

      if (evt.target) {
        console.info(`觸發(fā)事件：節(jié)點(diǎn)：${evt.target.id}, ${evt.target.attr.itemFlag}`)
      }
    },
    onClickHandler2 (arg1, arg2, evt) {
      // 事件類型，事件參數(shù)，target
      console.info(`觸發(fā)事件：類型：${evt.type}, 參數(shù)： ${arg1}, ${arg2}`);
    },
    emitElement () {
      // 注意：通過此類方式的事件不會攜帶target屬性，開發(fā)者可以通過detail參數(shù)實(shí)現(xiàn)
      this.$emitElement('click', { params: '參數(shù)內(nèi)容' }, 'elNode1')
    }
  }
</script>

總結(jié)

掌握監(jiān)聽與觸發(fā)事件能夠更好的分離業(yè)務(wù)邏輯，減少方法響應(yīng)上的耦合