Vue事件处理+ Vue事件修饰符(阻止默认行为等)+Vue中的键盘事件

目录

1.Vue事件处理 使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件

1.事件处理函数是写在Vue配置对象methods中的

2.调用事件处理函数时需要传参和不需要传参的写法

3.methods 中的方法也在Vue实例化对象上面，但是没有像在data中的数据一样做数据代理。

 4.事件的基本使用总结

 2.Vue事件修饰符:对事件进行修饰(阻止默认行为等)

 1.阻止默认事件  prevent

2.阻止冒泡  stop

3. 事件只触发一次 once

4.使事件在捕获阶段执行   capture

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

6.事件的默认行为立即执行，无需等待事件回调函数执行完毕  passive

3.Vue中的键盘事件 keydown 和 keyup

1.在按下某个特定的键盘按钮时，整个键盘事件代码才完整执行   写法：利用键盘按钮别名

2.特殊：换行 tab   它有一个功能：将焦点从当前元素上切走   只能配合keydown

3.特殊： 系统修饰键:ctrl,alt,shift,meta(win键) 。配合keyup使用时，按下修饰键的同时，再按下其它键，随后释放其它键，事件才被触发。配合keydown使用：正常触发事件。

3.Vue事件中两个技巧 

1.修饰符可以连续写  eg:既阻止冒泡，又阻止默认事件  写法:eg:@click.prevent.stop

 2.系统修饰键:如果想要按下系统修饰键，再指定按下某一个键时，事件才生效，写法：eg:@keyup.ctrl.y 

---

1.Vue事件处理 使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件

1.事件处理函数是写在Vue配置对象methods中的

 事件处理函数要写在 Vue配置项methods 中。 

 所有被Vue管理的函数最好都写成 普通函数或者ES6中对象方法 写法,(methods中的方法就属于被Vue管理的函数)，不要写成箭头函数 。如果写成箭头函数，则函数体里面的this指向就不是Vue实例对象了。写成普通函数或者ES6中对象方法形式的好处是其中的this指向是Vue实例化对象vm

2.调用事件处理函数时需要传参和不需要传参的写法

    

        
欢迎来到{{name}}学习
        点我有提示信息(不需要传参时)
        点我有提示信息(需要传参时)
    
    

3.methods 中的方法也在Vue实例化对象上面，但是没有像在data中的数据一样做数据代理。

 4.事件的基本使用总结

1.使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件，其中xxx是事件名

2.事件的回调(事件处理函数)需要配置在 methods 对象中，最终会在 vm上

3.methods 中配置的函数，不要用箭头函数！！，否则this指向就不是vm

4.methods 中配置的函数，都是被Vue所管理的函数，this指向是 vm 或者 组件实例对象

 2.Vue事件修饰符:对事件进行修饰(阻止默认行为等)

Vue中的事件修饰符

        1.prevent :阻止默认事件(常用)

        2.stop      :阻止事件冒泡(常用)

        3.once     :事件只触发一次(常用)

        4.capture :使事件在捕获阶段执行

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

        6.passive  :事件的默认行为立即执行，无需等待事件回调执行完毕

        

 1.阻止默认事件  prevent

    

        
欢迎来到{{name}}学习
        
        点我提示信息
    
    

 分析：点击a标签后，页面不跳转，还是在当前页面，还是会打印 "你好啊，同学"

2.阻止冒泡  stop

分析：点击 .son 元素，只会触发一次点击事件，也就是在 .son元素那里 点击事件处理函数执行后，就不会冒泡到 .far元素那里，所以只打印一次  “你好啊，同学”

3. 事件只触发一次 once

    

        点击真的只触发一次欸
    
    

分析：点击按钮，页面跳出弹窗：你好啊，同学， 然后再点击按钮，就不会弹出弹窗了，也就是点击事件只触发一次。

4.使事件在捕获阶段执行   capture

分析：不给 .far元素  的点击事件设置  capture属性时，点击 .son 元素，输出打印结果  2，1.  给了 .far 元素设置 capture属性时，点击 .son 元素，输出打印结果：1，2，原因时:capture使得事件在捕获阶段就执行，而不用等到冒泡阶段

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

分析： .far 元素没有设置 self属性时，点击 .son 元素，结果为：(冒泡的原因)

.far 元素设置self属性后，点击 .son元素，结果为：

也会有冒泡，但是冒泡到 .far 元素时，因为点击的是 .son元素，event.target 是 .son元素不是 .far元素，所以  .far元素的点击事件不会执行。 所以self属性作用：只有event.target是当前操作的元素时才触发事件  

6.事件的默认行为立即执行，无需等待事件回调函数执行完毕  passive

这里要区分两个滚动事件：scroll 和  wheel 

scroll :滚动条可以通过键盘的上下键去滚动，也可以通过鼠标的滚轮去滚动，都会触发scroll滚动事件

wheel:滚动条可以通过键盘的上下键去滚动，也可以通过鼠标的滚轮去滚动，但是只有通过滚轮滚轮的才会触发wheel滚轮数据

它们之间的区别：

区别1:

wheel滚轮事件：就算滚动条已经到底了，再次移动鼠标的滚轮，wheel滚轮事件还是会触发。但是按键盘上下键却不会触发wheel事件。

scroll滚动事件：滚动条到底了，不管移动鼠标滚轮还是键盘上下键，都不会触发scroll滚动事件

区别2(重点)： 

wheel：滚动鼠标滚轮后，首先去触发 wheel滚动事件函数，函数执行完毕后，再去执行默认行为(滚动条移动)==>这个环节就是浪费时间了，如果wheel滚动事件函数执行时间较长，页面就会卡顿。

解决办法就是：passive   事件的默认行为立即执行，不用等待事件回调函数执行完毕。

scroll:滚动鼠标后，先去执行默认行为，再去执行执行scroll滚动事件函数。

综上：passive可以解决 wheel滚动事件中因为 事件处理函数执行事件过长的 滚动条卡顿 

    

        

            
1
            
2
            
3
            
4
        
    
    

注意点：如果做的是移动端(平板和手机)的项目，这个passive用的就会多一点。 

3.Vue中的键盘事件 keydown 和 keyup

keydown:按下键盘上的键不用抬起来就触发

keyup：按下键盘上的键抬起来才触发

    

        
欢迎来到{{name}}学习