阅读(5.1k) 书签赞(0) 我要纠错

快应用事件监听与触发

2020-08-08 15:23 更新

了解事件监听API，如何触发ViewModel的事件、组件节点的事件

通过本节，你将学会：

监听与移除监听事件：$on()、$off
触发ViewModel事件：$emit()
监听原生组件事件
触发原生组件事件：$emitElement()

教程文档对应的项目代码文件：src/BindEvents目录

监听与移除监听事件

$on 用于监听自定义事件；$off移除对应的事件监听

$on(evtName, fnHandler)

在当前页面注册监听事件，可监听$emit()、 $dispatch()、 $broadcast()等触发的自定义事件，不能用于注册组件节点的事件响应

示例如下：

 export default {
    onInit(){
      this.$on('customEvtType1', this.customEvtType1Handler)
    },
    customEvtType1Handler(evt){
      // 事件类型，事件参数
      console.info(`触发事件：类型：${evt.type}, 参数： ${JSON.stringify(evt.detail)}`);
    }
  }

$off(evtName, fnHandler)

移除事件监听，参数 fnHandler 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听

示例如下：

 export default {
    removeEventHandler () {
      // 不传递fnHandler：移除所有监听
      this.$off('customEvtType1')
      // 传递fnHandler：移除指定的监听函数
      this.$off('customEvtType1', this.customEvtType1Handler)
    }
  }

触发`ViewModel`事件

页面的交互中可能会遇到一些非手动触发的需求，$emit() 通过触发当前实例上的事件达到动态触发事件的行为

$emit(evtName, evtDetail)

触发当前实例监听事件函数，与 $on() 配合使用

注意：$emit() 目前只触发 $on 所监听的事件

示例如下：

 export default {
    emitEvent () {
      this.$emit('customEvtType1', { params: '参数内容' })
    }
  }

监听原生组件事件

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

很多开发者希望能够在事件回调函数中，获取到当前触发组件的信息，并进行进一步的操作，那么办法有以下多种，如下代码所示：

在响应函数执行时通过target获取，如：onClickHandler
在响应函数绑定时传递参数，如：onClickHandler2

示例如下：

<template>
  <div class="tutorial-page">
    <text id="elNode1" item-flag="{{ argName + 1 }}" onclick="onClickHandler">组件节点1</text>
    <text id="elNode2" item-flag="{{ argName + 2 }}" onclick="onClickHandler2('参数1', argName)">组件节点2</text>
  </div>
</template>

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

<script>
  export default {
    data () {
      return {
        argName: '动态参数'
      }
    },
    onClickHandler (evt) {
      // 事件类型，参数详情
      console.info(`触发事件：类型：${evt.type}, 详情： ${JSON.stringify(evt.detail)}`);

      if (evt.target) {
        console.info(`触发事件：节点：${evt.target.id}, ${evt.target.attr.itemFlag}`)
      }
    },
    onClickHandler2 (arg1, arg2, evt) {
      // 事件类型，事件参数，target
      console.info(`触发事件：类型：${evt.type}, 参数： ${arg1}, ${arg2}`);
    }
  }
</script>

触发原生组件事件

除了用户手动操作触发事件，响应回调之外；开发者可以在代码中通过$emitElement()完成事件的动态触发

$emitElement(evtName, evtDetail, id)

可以触发指定组件id的事件，通过evt.detail获取传递的参数；该方法对自定义组件无效

示例如下：

<template>
  <div class="tutorial-page">
    <text onclick="emitElement">触发组件节点的事件：click</text>
    <text id="elNode1" item-flag="{{ argName + 1 }}" onclick="onClickHandler">组件节点1</text>
    <text id="elNode2" item-flag="{{ argName + 2 }}" onclick="onClickHandler2('参数1', argName)">组件节点2</text>
  </div>
</template>

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

<script>
  export default {
    data () {
      return {
        argName: '动态参数'
      }
    },
    onClickHandler (evt) {
      // 事件类型，参数详情
      console.info(`触发事件：类型：${evt.type}, 详情： ${JSON.stringify(evt.detail)}`);

      if (evt.target) {
        console.info(`触发事件：节点：${evt.target.id}, ${evt.target.attr.itemFlag}`)
      }
    },
    onClickHandler2 (arg1, arg2, evt) {
      // 事件类型，事件参数，target
      console.info(`触发事件：类型：${evt.type}, 参数： ${arg1}, ${arg2}`);
    },
    emitElement () {
      // 注意：通过此类方式的事件不会携带target属性，开发者可以通过detail参数实现
      this.$emitElement('click', { params: '参数内容' }, 'elNode1')
    }
  }
</script>