# 事件监听与触发

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

通过本节，你将学会，在当前页面中：

注：本节描述的均为当前页面实例中的事件监听与触发，如需了解父子组件实例间事件监听与触发，可参见组件。

# 事件监听与移除监听

$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)}`
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11

# $off(evtName, fnHandler)

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

示例如下：

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

# 触发ViewModel事件

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

# $emit(evtName, evtDetail)

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

**注意：**在当前实例中，$emit() 目前只触发 $on 所监听的事件

示例如下：

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

# 监听原生组件事件

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

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

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

# 通用事件简写

如：onclick,onchange 可简写成 @click,@change

示例如下：

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

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

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

      if (evt.target) {
        console.info(`触发事件：节点：${evt.target.id}, ${evt.target.attr.disabled}`)
      }
    },
    onClickHandler2 (arg1, arg2, evt) {
      // 事件类型，事件参数，target
      console.info(`触发事件：类型：${evt.type}, 参数： ${arg1}, ${arg2}`);
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 事件冒泡

我们对某些通用事件开放了冒泡功能，详见通用事件。

在未支持冒泡功能之前，开发者仅可以使用 target 属性，指向事件触发的节点。

在已支持冒泡功能之后，开发者可以同时使用 target 与 currentTarget，具体的指向与web规范保持一致；前者指向事件目标节点，后者指向事件触发节点。

示例如下：

<template>
  <div class="tutorial-page">
    <div id="parentNode" class="outer" onclick="onParentClickHandler">
      <text class="inner" id="childNode1" onclick="onChildClickHandler">子组件1</text>
      <text class="inner" id="childNode2">子组件2</text>
    </div>
  </div>
</template>

<style>
  .outer {
    width: 750px;
    height: 500px;
    background-color: #eeeeee;
  }

  .inner {
    flex: 1;
    margin: 100px;
    background-color: #f00;
  }
</style>

<script>
  export default {
    onParentClickHandler (evt) {
      // 事件类型
      console.info(`触发父组件事件：类型：${evt.type}`);
    },
    onChildClickHandler (evt) {
      // 事件类型
      console.info(`触发子组件事件：类型：${evt.type}`)
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

打印结果

触发子组件事件：类型：click

触发父组件事件：类型：click
1
2
3

事件分为捕获冒泡阶段，事件流的方向为 捕获 -> 冒泡 (父节点 -> 子节点 -> 父节点)，详细可查看事件触发 (opens new window).

通过上例，可以看出先触发子组件的click事件，冒泡触发父子件的click事件。