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

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

通過(guò)本節(jié)，你將學(xué)會(huì)：

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

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

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

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

$on(evtName, fnHandler)

在當(dāng)前頁(yè)面注冊(cè)監(jiān)聽(tīng)事件， 可監(jiān)聽(tīng)$emit()、 $dispatch()、 $broadcast()等觸發(fā)的自定義事件，不能用于注冊(cè)組件節(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)聽(tīng)，參數(shù) fnHandler 為可選，傳遞僅移除指定的響應(yīng)函數(shù)，不傳遞則移除此事件的所有監(jiān)聽(tīng)

示例如下：

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

觸發(fā)ViewModel事件

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

$emit(evtName, evtDetail)

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

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

示例如下：

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

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

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

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

1. 在響應(yīng)函數(shù)執(zhí)行時(shí)通過(guò)target獲取，如：onClickHandler
2. 在響應(yīng)函數(shù)綁定時(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: '動(dòng)態(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ā)原生組件事件

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

$emitElement(evtName, evtDetail, id)

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

示例如下：

<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: '動(dòng)態(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 () {
      // 注意：通過(guò)此類方式的事件不會(huì)攜帶target屬性，開(kāi)發(fā)者可以通過(guò)detail參數(shù)實(shí)現(xiàn)
      this.$emitElement('click', { params: '參數(shù)內(nèi)容' }, 'elNode1')
    }
  }
</script>

總結(jié)

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