v-on事件修饰符及按键修饰符

v-on 事件修饰符

常用的事件修饰符有：

.stop  阻止事件冒泡

.self  当事件在该元素本身触发时才触发事件

.capture 添加事件侦听器是，使用事件捕获模式

.prevent  阻止默认事件

.once 事件只触发一次

什么是事件冒泡

  
  
  
  
  
  


  


    
事件冒泡
    

      

        事件冒泡
      
    
    
当点击按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件
    
当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件
    
当点击outer div时，只触发outer点击事件
    
这就是事件冒泡

  
  

.stop  阻止事件冒泡

  
  
  
  
  
  


  


    
.stop阻止事件冒泡
    

      

        阻止事件冒泡
      
    
    
.stop可以实现当我点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡

  
  

.self  只有当事件在该元素本身触发时才触发事件

  
  
  
  
  
  


  


    
.self当事件在该元素本身触发时触发回调（比如 不是子元素）
    

      

        self效果
      
    
    
.self只能阻止自己身上冒泡行为，并不会真正的阻止冒泡行为
    
只给inner div 加.self，当点击按钮时，会从里到外依次触发按钮点击事件、outer点击事件
    
而不会触发inner点击事件，跳过了inner div冒泡
    
当点击inner div时，依然会从里到外依次触发inner点击事件、outer点击事件
    
  
  

.capture 添加事件侦听器是，使用事件捕获模式

  
  
  
  
  
  


  


    
.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)
    

      

        事件捕获
      
    
    
当给inner div、outer div都添加.capture修饰符的时候
    
当点击按钮时，会从外到里依次触发outer点击事件、inner点击事件、按钮点击事件
    
当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件
    
当点击outer div时，只触发outer点击事件
    
这就是事件捕获


    
.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)
    

      

        事件捕获
      
    
    
当只给outer div添加.capture修饰符的时候
    
当点击按钮时，会依次触发outer点击事件、按钮点击事件、inner点击事件
    
即为outer和outer内部分两部分，是事件捕获，但outer内部还有嵌套的部分仍是事件冒泡
    
当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件
    
当点击outer div时，只触发outer点击事件


    
.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)
    

      

        事件捕获
      
    
    
当只给inner div添加.capture修饰符的时候
    
当点击按钮时，会依次触发((inner点击事件、按钮点击事件)(事件捕获)、outer点击事件)(事件冒泡)
    
当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件，事件冒泡
    
当点击outer div时，只触发outer点击事件
    
  
  

.prevent  阻止默认事件

  


    
.prevent阻止默认事件
    百度一下 你就知道
    // 点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转

  
  

.once 事件只触发一次

  


    
.once事件只触发一次
    
    
  
  

v-on 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

按键别名：
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

注意：在Windows系统键盘上meta对应windows徽标键(⊞)。

    

        // Enter键触发submit事件  下面三种写法都对
        
        
        
    

    

修饰符可以串联

    
    
    
    


    

        
        
        
        

        
修饰符串联
        

            

                
                修饰符串联