事件处理

最新推荐文章于 2024-01-19 08:00:00 发布

你真好看l

最新推荐文章于 2024-01-19 08:00:00 发布

阅读量74

点赞数

分类专栏： vue的学习

本文链接：https://blog.csdn.net/qq_40052011/article/details/102600254

版权

vue的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

监听事件：
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码.
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。
事件修饰符：
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符：
.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符：

使用 keyCode 特性也是允许的：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--
		1.绑定监听，
		v-on:xxx="fun"
		@xxx="fun"
		@xxx="fun(参数)"
		2.事件修饰符
		.prevent:阻止事件的默认行为event.preventDefault()
		.stop:阻止事件冒泡event.stopPropagation()
		
		-->
	</head>
	<body>
		<div id="demo">
			<h1>1绑定监听</h1>
			<button type="button" v-on:click="test">test</button>
			<button type="button" v-on:click="test1($event)">test1</button>
			
			
			<h1>2事件修饰符</h1>
			<div style="width:200px;height:200px;background-color: #0000FF;" v-on:click="test5">
				<div style="width:100px;height: 100px;background-color: #7FFFD4;" v-on:click.stop="test6">
					<!--停止了事件冒泡-->
				</div>
				
			</div>
			
			<h1>3按键修饰符</h1>
			<input type="text" @keyup.enter="test8"/>
			<!--在按下enter键后执行test8-->
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#demo",
				data:{
					
					
				},
				methods:{
					test(){
						alert("hello");
					},
					test1(event){
						alert(event.target.innerHTML);
					},
					
					test5(){
						alert("点击了out");
					},
					test6(){
						//event.stopPropagation();
						alert("点击了inner")
					},
					test8(event){
						// if(event.keyCode==13){
						// 	alert(event.target.value+''+event.keyCode)//每个按键都有一个keycode当keycode为十三即按enter键
						// 
						alert(event.target.value+''+event.keyCode)
						
					}
				}
			})
		</script>
	</body>
</html>