vue事件（焦点事件、鼠标事件、 滚轮事件、输入事件、键盘事件、输入法事件）_vue焦点事件

目录

 一、焦点事件

二、鼠标事件

三、滚轮事件

四、输入事件

五、键盘事件

---

 一、焦点事件

焦点事件是指在元素获得或失去焦点时触发的事件。

@blur 是当元素失去焦点时所触发的事件

@focus是元素获取焦点时所触发的事件

//@blur 是当元素失去焦点时所触发的事件
<input type="text" @blur="blurText"/>
 
//@focus是元素获取焦点时所触发的事件
<input type="text" @focus="focusText"/>

---

二、鼠标事件

鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。（当用户使用鼠标点击网页上的某个元素，或者使用键盘按下某个键，会执行对应的回调，进而在短时间内产生动作。)

鼠标事件(将v-on简写为@)

@click // 单击
@dblclick // 双击

@mouse enter: 鼠标指针进入)被选元素时,会发生mousedown事件。

@mouse down: 鼠标指针移动到元素上方时,并按下鼠标左键,发生mousedown事件。 @mouse leave: 是指鼠标离开被选元素时，发生mouseleave事件。

@mouse move: 鼠标指针在指定的元素中移动时，发生 mousemove 事件。

@mouse out: 在鼠标指针离开被选元素或任意子元素时，都会被触发。

@mouse over: 鼠标指针位于元素上方时， 会发生 mouseover 事件。

@mouse up: 鼠标指针移动到元素上方， 并松开鼠标左键时， 会发生 mouseup 事件。

//例
//点击这个按钮，可以调用txt函数 -->
<button @click="txt">点击</button>
 
//当双击这个按钮，可以调用txt函数 -->
<button @dblclick="txt">双击</button>

---

三、滚轮事件

滚轮事件: 使用鼠标滚轮时触发的事件。

@scroll="shonwinfor" 针对的是窗口滚动条，当滚动条动作，就会执行相应的回调。

//@scroll
<div @scroll="showinfor">滚动</div>

@wheel="showinfor" 针对的是鼠标滚轮，只要鼠标滚轮动作，就会执行相应的回调

//@wheel
<div @wheel="showinfor">滚动</div>

---

四、输入事件

输入事件: 向文档中输入文本时触发的事件。

change：变更

input：实时变化

@input输入框里面内容发生改变（且不用失去焦点）时触发，用于实时查询。

@change：输入框里面内容发生改变且失去焦点时触发。

//例
<input @change="txt">
 
 
<input @input="txt">

---

五、键盘事件

键盘事件:使用键盘在页面上执行某些操作时触发的事件，键盘按下/键盘弹起这一些行为设立相应的触发事件。

@keydown（键盘按下时触发）

@keyup(键盘弹起)

@keypress(键盘按住时触发)

如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断，这样会显的很麻烦。
在vue中就为我们一些常用的按键提供了别名，并且只需要我们在事件后加上相应别名即可，不需要我们手动的在事件中进行判断。
 

通过使用Vue提供的一些常用键盘别名，创建键盘事件

enter键事件：

@keyup.enter="showinfor"

@keydown.enter="showinfor"

esc键事件：

@keyup.esc="showinfor"

@keydown.esc="showinfor"

space键事件：

@keyup.space="showinfor"  

@keydown.space="showinfor"

方向键事件：

@keyup.up="showinfor"  

@keydown.up="showinfor"   

ps：这几个特别的键，ctrl、alt、shift、win(meta)键只能搭配keydown使用，因为这几个特殊的按键本身带有特定的功能，当按下时就会触发跳转。

在键盘中，每一个键盘其实都有一个数字与其对应，类似于ASCII表

如果使用键盘码数字的话不太好记，所以也有别名来帮助，如下：

回车   enter
删除  delete
退出  esc
空格  space
换行  tab(较为特殊，应该配合用keydown使用)
上      up
下      down
左      left
右      right
 

//例
<input @keyup.enter="showinfor">  
 
<input @keydown.enter="showinfor">