组件事件

分类	Composition API（Vue3）	Options API（Vue3）	Options API（Vue2）
事件及类型声明	defineEmits() v3.0	emits v3.0	emits v2.7
\-回调	-	methods v3.0	methods v2.0
触发	var emit() v3.0	$emit() v3.0	$emit() v2.0
-	-	-	$listeners v2.4
绑定	-	@ / v-on v3.0	@ / v-on v2.0
-	-	@/v-on	$on v2.0
-	-	.once v3.0	$once v2.0
-	-	组件卸载自动完成	$off
DOM 事件对象	-	$event v3.0	$event v2.0

大纲

• 事件
  • 事件类型
    • 键盘
    • 鼠标
    • 表单
  • 声明
    • 回调
    • 参数类型
    • 自定义事件
  • 触发
  • 绑定及传参
    • 绑定
    • 移除监听
    • 事件修饰符
      • 键盘修饰符
      • 鼠标修饰符
  • DOM 事件对象
    • 事件捕获和冒泡
    • 阻止传播
    • 阻止默认行为
  • 原理
    • 事件代理
    • DOM 事件模型

事件类型

• 键盘
  • keyup
  • ...
• 鼠标
  • click
  • mousedown
  • mouseup
  • scroll
  • ...
• 表单
  • input
  • change
  • submit
  • resize
  • ...

事件声明

事件及类型声明

Vue3

<script setup lang="ts">
// 声明自定义事件及事件类型检查
const emit = defineEmits<{
  cClick: [data: string]
}>()
</script>

<template>
  <!-- About -->
  <button type="button" @click="emit('cClick', {a: 'a'})">按钮</button>

  <!-- AboutWrap -->
  <About @cClick="handleClick" />
  <!-- <About v-on:cClick="handleClick" /> -->
  <!-- <About @c-click="handleClick" /> -->
  <!-- <About v-on:c-click="handleClick" /> -->
</template>

Vue2

<script lang="ts">
export default {
  // 声明自定义事件类型检查
  emits: ['cClick'],
}
</script>

<template>
  <!-- About -->
  <button type="button" @click="$emit('cClick', { data: '2' })">按钮</button>

  <!-- AboutWrap -->
  <About v-on:cClick="handleClick" />
  <!-- <About @cClick="handleClick" /> -->
  <!-- <About v-on:c-click="handleClick" /> -->
  <!-- <About @c-click="handleClick" /> -->
</template>

回调声明

事件回调函数的声明：

Vue3

<script setup lang="ts">
// 声明事件回调函数及 DOM 事件对象
const handleClick = (event) => {
  console.log('handleClick', event)
}
</script>

<template>
  <button type="button" @click="handleClick">按钮</button>
</template>

Vue2

<script lang="ts">
export default {
  methods: { 
    // 声明事件回调函数及 DOM 事件对象
    handleClick: function (event) {
      console.log('handleClick', event)
    },
  }
}
</script>

<template>
  <button type="button" @click="handleClick">按钮</button>
</template>

事件触发

Vue3

<script setup lang="ts">
// 声明自定义事件及事件类型检查 
const emit = defineEmits<{ 
  cClick: [data: string]
}>()
</script>

<template>
  <!-- About -->
  <button type="button" @click="emit('cClick', {a: 'a'})">按钮</button>

  <!-- AboutWrap -->
  <About @cClick="handleClick" />
  <!-- <About v-on:cClick="handleClick" /> -->
  <!-- <About @c-click="handleClick" /> -->
</template>

Vue2

<script lang="ts">
export default {
  // 声明自定义事件类型检查，仅以类型检查为目的 (并不会影响运行时的行为)
  emits: ['cClick'],
}
</script>

<template>
  <!-- About -->
  <button type="button" @click="$emit('cClick', { data: '2' })">按钮</button>

  <!-- AboutWrap -->
  <About v-on:cClick="handleClick" />
  <!-- <About @c-click="handleClick" /> -->
</template>

事件绑定及传参

事件绑定/监听:

Vue3

<script setup lang="ts">
// 声明事件回调函数
const handleClick = (data, event) => {
  console.log('handleClick', data)
}
</script>

<template>
  <button type="button" @click="handleClick({a: 'a'})">按钮</button>
  <button type="button" v-on:click="handleClick({a: 'a'})">按钮</button>
</template>

Vue2

<script lang="ts">
export default {
  methods: { 
    // 声明事件回调函数
    handleClick: function (data, event) {
      console.log('handleClick', data)
    },
  }
}
</script>

<template>
  <button type="button" @click="handleClick({a: 'a'})">按钮</button>
  <button type="button" v-on:click="handleClick({a: 'a'})">按钮</button> 
</template>

Vue2 实例中其他绑定事件及移除绑定的方法（Vue3中以删除）：

• 绑定事件
  • $on
  • $once
• 移除监听
  • $off

事件修饰符

事件修饰符作用于 v-on 指令：v-on:click.stop=""。使用修饰符时，顺序很重要。

事件修饰符	DOM 事件细节	说明
.prevent	event.preventDefault()	阻止系统默认行为（捕获阶段）
.stop	event.stopPropagation()	阻止 JS 事件冒泡和捕获（冒泡/捕获阶段）
.capture		捕获阶段添加事件监听器
.self		只有事件从元素本身发出才触发处理函数
.once		最多触发一次事件处理函数
.passive		附加一个 DOM 事件（立即触发），该修饰符会告诉浏览器，你不想阻止事件的默认行为
	event.stopImmediatePropagation()	阻止监听同一事件的其他事件监听器被调用（冒泡阶段）

键盘修饰符

事件修饰符	说明
{keyCode}	键代码
.esc	Esc 键
.delete	Del（删除）键 和 Back（退格）键
.tab	Tab 键
.enter	Ent 键，确认键
.space	空格键
keyup.up	向上箭头键
keyup.down	向下箭头键
keyup.left	向左箭头键
keyup.right	向右箭头键
.ctrl	Ctrl 键
.alt	Alt 键
.shift	Shift 键
.meta	Meta 键
.exact	精确控制

鼠标修饰符

事件修饰符	说明
.left	鼠标左键被按下时，触发事件处理函数
.middle	鼠标中键被按下时，触发事件处理函数
.right	鼠标右键被按下时，触发事件处理函数

DOM事件对象

• $event

事件原理

DOM 事件模型

事件代理