[Vue]事件

最新推荐文章于 2024-04-24 09:32:44 发布

小炜1128

最新推荐文章于 2024-04-24 09:32:44 发布

阅读量699

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js javascript 前端 css3 html

本文链接：https://blog.csdn.net/m0_53022813/article/details/127063674

版权

Vue 学习笔记专栏收录该内容

90 篇文章 28 订阅

订阅专栏

在这里插入图片描述

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. 事件处理
1.1 事件绑定指令
1.2 元素事件绑定代码示例
1.3 事件处理函数的参数
1.4 事件处理函数的this
1.5 事件处理函数存放位置

2. 事件修饰符
3. 键盘事件

1. 事件处理

1.1 事件绑定指令

vue提供了v-on:事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

原生的DOM对象有onclick、oninput等原生事件，在vue中可以使用v-on:click、v-on:input等来监听DOM元素的对应事件，并为其绑定相应的事件处理函数，其中事件处理函数需要在vue实例对象的methods节点中进行声明。

v-on: 简写为 @。

1.2 元素事件绑定代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          alert('你好！')
        },
        show2() {
          alert('你好！！')
        },
      },
    })
  </script>
</body>
</html>

1.3 事件处理函数的参数

事件处理函数不进行参数的传递，默认会有一个参数，即事件的触发对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e) {
          alert('你好！')
          console.log('提示信息1')
          console.log(e)
        },
        show2(e) {
          alert('你好！！')
          console.log('提示信息2')
          console.log(e.target)
        },
      },
    })
  </script>
</body>
</html>

向事件处理函数显示的传递事件的触发对象，可以在绑定事件处理函数时，传入参数$event作为事件触发对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1($event)">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e) {
          alert('你好！')
          console.log('提示信息1')
          console.log(e.target)
        },
        show2(e) {
          alert('你好！！')
          console.log('提示信息2')
          console.log(e.target)
        },
      },
    })
  </script>
</body>
</html>

向事件处理函数传递其他参数的同时，传递事件的触发对象，此时，如果不显示的传递事件的触发对象，则事件的处理函数不会接收到事件触发对象这个参数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1($event, '张三')">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2('李四')">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e, uname) {
          alert('你好！')
          console.log('提示信息1   ' + uname)
          console.log(e.target)
        },
        show2(e, uname) {
          alert('你好！！')
          console.log('提示信息2 e   '+ e)
          console.log('提示信息2 uname   '+ uname)
        },
      },
    })
  </script>
</body>
</html>

1.4 事件处理函数的this

事件处理函数如果写成普通函数，则事件处理函数的this指向vue实例对象；如果事件处理函数写成箭头，则事件处理函数的this指向windows对象，因为箭头函数没有自己的this。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <button v-on:click="show1()">提示信息1</button>
    <button @click="show2()">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          console.log('普通函数形式的this：',this === vm)
        },
        show2: () => {
          console.log('箭头函数形式的this：',this)
        },
      },
    })
  </script>
</body>
</html>

1.5 事件处理函数存放位置

事件处理函数定义后，最终会挂载到vue实例对象上。

事件处理函数不进行数据代理，只有写在data节点上的才会进行数据代理。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <button v-on:click="show1()">提示信息1</button>
    <button @click="show2()">提示信息2</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          console.log(vm)
        },
        show2: () => {
          console.log('箭头函数形式的this：',this)
        },
      },
    })
  </script>
</body>
</html>

2. 事件修饰符

在事件处理函数中调用preventDefault()(阻止默认行为)或 stopPropagation()(阻止冒泡)对事件的触发进行控制是非常常见的需求。

因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。

事件修饰符	说明
.prevent	阻止默认行为（例如:阻止a连接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡(事件的默认处理阶段为冒泡阶段)
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数
.passive	事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件 -->
	      <!-- a连接点击之后会进行页面的跳转，
	        使用 .prevent 进行修饰后，
	        点击之后不会进行页面的跳转-->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡 -->
	      <!-- 
	        事件捕获：
	        点击按钮事件的传递方向为 div => button 由外向内
	        事件冒泡：
	        点击按钮向进行事件的捕获，
	        随后进行事件的冒泡，事件的传递分向为 button => div 由内向外
	        事件调用处理函数进行处理，默认是在事件冒泡阶段
	        使用 .stop 修饰，可以阻止事件向外冒泡 -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</div>

			<!-- 事件只触发一次 -->
      	    <!-- 事件触发一次后，不再触发 -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
      		<!-- 使事件调用处理函数处理在事件的捕获阶段而不是冒泡阶段 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件 -->
	      <!-- 
	        由于事件默认情况下会出现冒泡，
	        所以外层的事件依旧会触发，但是外层的触发元素不是外层元素本身
	        而是内层元素
	        .self 进行修饰可以使 只有event.target是当前操作的元素时才触发事件
	       -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
	      <!-- 
	        事件默认情况下会等待回调函数 demo() 执行完成才会触发自己的默认行为
	        如下代码，即函数执行完成才会进行滚动条的滚动
	        .passive 可以使默认行为先执行，即滚动条立即滚动
	       -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

对事件需要进行多种修饰，可以在事件后面添加多个事件修饰符，即事件修饰符可以连写。
例如，既要阻止冒泡，又要阻止默认事件：

<div class="demo1" @click="showInfo">
	<a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>
</div>

3. 键盘事件

在监听键盘事件时，我们经常需要判断按键，根据按下的按键进行事件的处理。Vue为我们提供了一些常用的按键别名，此时，可以使用vue提供的别名为键盘相关的事件添加按键修饰符。

Vue中常用的按键别名：

按键	别名
回车	enter
删除	delete (捕获“删除”和“退格”键)
退出	esc
空格	space
换行	tab (特殊，必须配合keydown去使用)
上	up
下	down
左	left
右	right

tab键可以将光标从当前元素切走，tab配合keyup使用，即要等tab键抬起才会触发事件，但是当我们按下tab键光标就会从当前元素切走，无法触发事件的处理函数。tab配合keydown使用，在按下的时候会调用处理函数，同时光标从当前元素切走，所以tab 特殊，必须配合keydown去使用。

vue没有提供别名的按键，可以使用按键原始的key值进行绑定，但是对于那种按键由不同单词复合而成的需要进行转化，例如，大小写切换键CapsLock 转为caps-lock(短横线命名)。

获取按键名：e.key
获取按键编码：e.keyCode
- 其中，e为键盘事件
系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件

自定义按键别名：

Vue.config.keyCodes.自定义键名 = 键码

代码示例：
实现功能，按下enter键在控制台输出在文本框输入的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

键盘事件可以连写。比如需要实现，按下ctrl+y键才在控制台输出在文本框输入的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.key)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>