Vue学习：事件修饰符

当使用连接点击，触发默认事件时，会出现跳转，跳转是默认行为，可以取消

    
    
 
        
欢迎页面，你好 {{name}}
        点我提示信息
      
    
    

阻止事件冒泡 (当后代元素的事件被触发时，其祖先元素相同的事件也会触发)

        
        

            点我提示信息
        

---

once:事件只触发一次（常用，不然每次点击都会触发

        
        点我提示信息

---

进行 capture：使用事件的捕获模式

实际上，先进行点击触发的是事件的捕获，然后是事件冒泡，默认情况下 事件冒泡下进行事件触发。3阶段--先捕获道div1,没有目标元素事件，然后div2捕获到目标事件，然后事件从目标元素项祖先元素传递，依次触发事件

点击div2触发两个

      
        

            div1
            

                div2
            
        

        new Vue({ 
            el: '#root',
            data: {
                name:'Amy',
            },
            methods:{
                showInfo(event){//可以接受参数吗
                   alert('世界好')
                },
                showMesage(msg){
                   console.log(msg)

                }
                
            }
           

        });

 

不想要在冒泡阶段进行处理事件，想要在捕获上开始进行处理事件

        
        

            div1
            

                div2
            
        

 

---

self:只有event.target是当前操作的元素是才触发事件

当出现冒泡的情况，event.target永远都是出现触发事件的对象

     

            点我提示信息
        

 冒泡触发两次事件  目标对象仍然是触发事件对象

  showSelf(m){
                    console.log(m.target)
                }

 self加载谁上面就管谁，如果有人触发了该对象上的事件，并且只有该事件对象是目标对象时候才能触发

       
        

            点我提示信息
        

---

 ul-绑定滚动事件" @scroll当事件滚动时候 

@scroll是给滚动条加的事件 触发的方式有 鼠标滚轮 和鼠标拖拽 键盘按键上下-滚动条不动的时候无法触发

        

            
1
            
2
            
3
            
4
        

@wheel-鼠标滚轮滚动触发事件 -当滚动条到底的时候也可以触发’

        

            
1
            
2
            
3
            
4
        

     demo(){
                    console.log('滚动了')

                }

---

事件触发方式：先触发事件，触发事件函数的调用（浪费了时间 页面出现卡顿），调用之后滚动条再往下走 

        
        

            
1
            
2
            
3
            
4
        

                demo(){
                    for(let i=0;i<100000;i++){
                        console.log('#')
                    }
                    console.log('累死了')

                }

 

passive：滚动条先往下走，不需要等事件回调函数执行完毕 

        
        

            
1
            
2
            
3
            
4
        

---

 不是所有的事件都存在默认事件后执行的问题，比如@scroll，直接默认事件就先执行了，不需要passive,优先响应滚动

移动端的passive使用的比较多