vue-事件

一、事件

1、事件的简写

v-on:click=“” 简写方式为： @click=“”

 

2、事件对象$event

包含事件相关的信息（事件源target、事件类型type、偏移量offset等）

 

3、事件冒泡

阻止事件冒泡，有两种方式：　

1）原生js方式，依赖于事件对象。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件title>
 6 
 7   <script src="../vue/vue.js">script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           show(e){
19             console.log(111)
20             e.stopPropagation();  //阻止事件冒泡
21           },
22           print(){
23             console.log(222)
24           },
25           write(){
26             console.log(333)
27           }
28         }
29       })
30     }
31   script>
32 head>
33 <body>
34 <div id="hello" @click='write'>
35   <P @click='print'>
36     <button @click='show($event)'>事件冒泡button>
37   P>
38 div>
39 body>
40 html>

 

　2）vue方式，添加修饰符，不依赖于事件对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件title>
 6 
 7   <script src="../vue/vue.js">script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           show(e){
19             console.log(111)
20           },
21           print(){
22             console.log(222)
23           },
24           write(){
25             console.log(333)
26           }
27         }
28       })
29     }
30   script>
31 head>
32 <body>
33 <div id="hello" @click='write'>
34   <P @click='print'>
35     <button @click.stop='show'>事件冒泡button>
36   P>
37 div>
38 body>
39 html>

 

4、事件默认行为

阻止默认行为，有两种方式：

1）原生js方式，依赖于事件对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件title>
 6 
 7   <script src="../vue/vue.js">script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           write(){
19             console.log(111)
20           },
21           study(e){
22             console.log(222)
23             e.preventDefault(); //js原生方式，阻止默认行为
24           }
25         }
26       })
27     }
28   script>
29 head>
30 <body>
31 <div id="hello" @click='write'>
32   <a href="#" @click='study($event)'>我是链接a>
33 div>
34 body>
35 html>

 

2）vue方式，添加修饰符，不依赖于事件对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           write(){
19             console.log(111)
20           },
21           study(e){
22             console.log(222)
23           }
24         }
25       })
26     }
27   </script>
28 </head>
29 <body>
30 <div id="hello" @click='write'>
31   <a href="#" @click.prevent='study'>我是链接</a>   //vue方法，在@click事件后加修饰符.prevent 阻止默认行为
32 </div>
33 </body>
34 </html>

 

5、键盘事件

1）原生js方式，依赖于事件对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           show(e){
19             console.log('keydown按下了键盘',e.keyCode)
20             if (e.keyCode==13) {
21               console.log('您按下了回车键')
22             }
23           },
24         }
25       })
26     }
27   </script>
28 </head>
29 <body>
30 <div id="hello">
31 <!-- 键盘事件 -->
32 用户名：<input type="text" @keydown='show($event)'>
33 </div>
34 </body>
35 </html>

 

2）vue方式（在事件名后面加上.13（或者.enter）），不依赖于事件对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           print(){
19               console.log('您按下了回车键')
20           },
21         }
22       })
23     }
24   </script>
25 </head>
26 <body>
27 <div id="hello">
28 <!-- 键盘事件 -->
29 <!-- 用户名：<input type="text" @keydown.13='print'> //vue方式，在@keydown后面加.13(或.enter)表示按了回车键触发事件print -->
30 </div>
31 </body>
32 </html>

 

6、事件修饰符

 1 <!-- 阻止单击事件继续传播 -->
 2 <a v-on:click.stop="doThis"></a>
 3 
 4 <!-- 提交事件不再重载页面 -->
 5 <form v-on:submit.prevent="onSubmit"></form>
 6 
 7 <!-- 修饰符可以串联 -->
 8 <a v-on:click.stop.prevent="doThat"></a>
 9 
10 <!-- 只有修饰符 -->
11 <form v-on:submit.prevent></form>
12 
13 <!-- 添加事件监听器时使用事件捕获模式 -->
14 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
15 <div v-on:click.capture="doThis">...</div>
16 
17 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
18 <!-- 即事件不是从内部元素触发的 -->
19 <div v-on:click.self="doThat">...</div>

 

posted @ 2021-08-24 14:20  AnnLing  阅读(229)  评论(0)    收藏  举报