Vue-事件

---

事件监听(事件绑定)

在Vue中使用v-on:监听事件,语法糖为@
函数有两种写法函数名后面可写可不写(),写了小括号可以传参,不传参时两种写法效果都一样。单个参数不传参打印时为事件对象。

事件触发方法时的参数传递：可以传递普通参数，也可以传递事件对象$event,设置参数不传参时

    



    

    点我打印666
  
    点我打印999

    点我打印888

    点我打印msg

    点我打印事件对象

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

事件修饰符

Vue认为方法应只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。所以引入了事件修饰符来处理DOM事件。

• .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

script代码

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当我们没有绑定stop时，点击元素时，点击事件会从这个元素的嵌套层级一级一级往上冒泡；
当绑定了stop时，就阻止了从当前元素经过的所有冒泡行为

    

        
点我打印666
        
点我打印999
            
点我打印msg
        
        
    
1
2
3
4
5
6
7

可以看到点击了紫色区域，只执行了当前元素的点击事件

• .prevent 阻止默认事件
  有些标签会自带事件，比如a标签点击时会跳转页面，此时给事件绑定prevent就不会执行默认事件

点我
1

• .capture 添加事件侦听器时让事件在捕获阶段触发
  补充：事件执行顺序是捕获=>目标=>冒泡
  事件默认是在冒泡阶段触发的,当在捕获阶段触发意味着我们点击它的子元素时,设置为捕获阶段触发的父元素会最先执行它的点击事件

        
点我打印666
        
点我打印999
            
点我打印ljy666
        
        
    
1
2
3
4
5
6
7

• .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,
  只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,
  但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素

 

        
点我打印666
        
点我打印999
            
点我打印ljy666
        
        
    
1
2
3
4
5
6
7

• .once 事件只触发一次,触发完之后,事件就解绑

        
点我打印666
        
点我打印999
            
点我打印ljy666
        
        
    
1
2
3
4
5
6
7

重复点击div3时只打印了一次

• 多修饰符一起使用:连点

    

        
点我打印666
        
点我打印999
            
点我打印ljy666
        
        
    
1
2
3
4
5
6
7

可以看见点击div2时只冒泡了它的事件,点击div3时只冒泡了div3和div2

按键修饰符

Vue的按键修饰符使用v-on:event.xxx，其中event为按键事件，xxx为键码或键码别名，如v-on:keydown.13或v-on:keydown.enter就表示：当按下回车键时才触发keydown方法。

//方式一
//方式二
1
2

Vue2.x为我们内置了一些常用的键码别名：

 .enter：回车键
 .tab：制表键
 .delete：含delete和backspace键
 .esc：返回键
 .space: 空格键
 .up：向上键
 .down：向下键
 .left：向左键
 .right：向右键
1
2
3
4
5
6
7
8
9

除了上面提到的按键别名，还可以用如下修饰键开启鼠标或键盘事件监听，使在按键按下时发生响应。

.ctrl
.alt
.shift
.meta
1
2
3
4

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。
换一种说法(组合键)：如果要引发 keyup.alt，必须按下 alt时释放其他的按键；单单释放 alt不会引发事件。

        //当我们按住alt在按C时执行fn函数
       
//当我们按住ctrl再点击执行fn3函数
1
2