「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」。

常用的事件修饰符(对事件的触发进行控制)

• • .prevent 阻止默认行为(如：阻止a链接的跳转、阻止表单的提交等)
  • .stop 阻止事件冒泡( 相当于event.stopPropagation )

• • .capture 以捕获模式触发当前的事件处理函数
  • .once 绑定的事件只触发一次（等同于$once方法）

• • .self 只有在event.target是当前元素自身时触发事件处理函数
  • .passive 事件的默认行为立即执行，不用等待事件的回调函数执行完毕

• 阻止事件触发时的默认行为，原生js用的是事件对象e的e.preventDefault( )

<div id="app">
  <a href="https://www.baidu.com/" @click="show">跳转到百度首页</a>
</div>

const vm = new vue({
	el: '#app',
  methods: {
  	show(e){
      // 在点击a链接后会跳转到百度首页，我们要阻止这个默认行为，可以用e.preventDefault()
      e.preventDefault()			// 原生js的方式
    	console.log('点击了a链接')
    }
  }			
})

<div id="app">
  <!-- vue的事件修饰符，在给a链接绑定click事件的同时又阻止了a链接默认的跳转行为 -->
  <a href="https://www.baidu.com/" @click.prevent="show">跳转到百度首页</a>
</div>

补充：

1. 事件修饰符是可以叠加连写的。如：既要阻止冒泡，又要阻止默认行为，则可以写成<a href="www.baidu.com" @click.stop.prevent="show">点我展示信息

键盘事件

键盘事件有两个，按下按键弹起时触发的keyup( )和按键按下时触发的keydown( )

若要求按下某一个按键才触发事件，则有以下两种方法：

1. 在事件处理函数中，通过事件对象获取到触发事件的按键编码(e.keyCode)，然后执行判断，当按键编码e.keyCode不是我想设置的按键编码时，直接return结束这个函数；当e.keyCode等于设置的按键编码，才执行事件处理函数

注意：e.key是获取到按键的名字，e.keyCode是获取到按键的编码

2. 通过键盘按键修饰符来实现

在监听键盘事件时，我们经常要判断详细的按键。此时，可以为键盘相关事件添加按键修饰符

<!-- 例子 -->
<!-- @keyup绑定键盘事件 -->
<!-- 只有在key是Enter时才调用vm.submit() -->
<input type="text" @keyup.enter="submit">

<!-- 在输入框中，按下esc键清空输入框内容 -->
<!-- 只有在key是esc时才调用vm.clearInput() -->
<input type="text" @keyup.esc="clearInput">

const vm = new Vue({
	el: '#app',
	methods: {
	  clearInput(e){
	  	e.target.value = ''         // 清空输入框内容
	  },
    submit(){
    
    }
	}         
})

补充：

按键修饰符是可以组合着写的，如：<input type="text" @keyup.ctrl.y="show"> 只有当ctrl和y一起按的时候才会触发事件

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖