前端常见事件触发总结

常见鼠标事件

双击 ： @dblclick=“方法名” ；
点击（单击）：@click=“方法名” ；
鼠标按下： @mousedown=“方法名” ；
鼠标抬起： @mouseup=“方法名” ；
鼠标移动： @mousemove=“方法名” ；
鼠标离开： @mouseleave=“方法名” ；
鼠标离开： @mouseout=“方法名” ；

注意⚠️
*mouseleave和mouseout的区别在于mouseout有冒泡行为。
鼠标进入： @mouseenter=“方法名” ；
鼠标进入： @mouseover=“方法名” 。
*mouseenter和mouseover的区别在于mouseover有冒泡行为。

鼠标滚轮事件

滚轮滚动： @mousewheel=“方法名” 。

键盘事件

@keydown（键盘按下时触发）

@keyup(键盘弹起)

@keypress(键盘按住时触发)

获取按键的键码 e.keyCode

方法后面跟keyCode值可以直接绑定键盘按键

@keyup.13 按回车键
@keyup.enter 回车
@keyup.up 上键
@keyup.down 下键
@keyup.left 左键
@keyup.right 右键
@keyup.delete 删除键
@keyup.space 空格

1

 
<template>
  <div>
    <h3>鼠标事件</h3>
    <div class="mouse-body">
      <b>click 鼠标单击</b>
      <div class="mouse-div" @click="click1"></div>
      <b>dblclick 鼠标双击</b>
      <div class="mouse-div" @dblclick="click2"></div>
      <b>mousedown 鼠标按下</b>
      <div class="mouse-div" @mousedown="click3"></div>
      <b>mouseup 鼠标抬起</b>
      <div class="mouse-div" @mouseup="click4"></div>
      <b>mousemove 鼠标移动</b>
      <div class="mouse-div" @mousemove="click5">{{num}}</div>
      <b>mouseleave 鼠标离开（leave）</b>
      <div class="mouse-div" @mouseleave="click6">
        {{num2}}
        <div style="width:50px;height:50px;border:1px blue solid"></div>
      </div>
      <b>mouseout 鼠标移出（out）这个离开包含了事件冒泡</b>
      <div class="mouse-div" @mouseout="click7">
        {{num3}}
        <div style="width:50px;height:50px;border:1px blue solid"></div>
      </div>
      <b>mouseenter 鼠标进入（enter）</b>
      <div class="mouse-div" @mouseenter="click8">
        {{num4}}
        <div style="width:50px;height:50px;border:1px blue solid"></div>
      </div>
      <b>mouseover 鼠标移入（over）这个移入包含了事件冒泡</b>
      <div class="mouse-div" @mouseover="click9">
        {{num5}}
        <div style="width:50px;height:50px;border:1px blue solid"></div>
      </div>
      <b>mousewheel 鼠标滑轮滚动</b>
      <div class="mouse-div" @mousewheel="click10"></div>
    </div>

    <h3>键盘事件</h3>
    <div>
      <input type="text" @keydown.space="key" />
    </div>

    <h3>事件修饰符</h3>
    <div>
      <input type="checkbox" @click.prevent="clickbox" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      num2: "",
      num3: "",
      num4: "",
      num5: ""
    };
  },
  methods: {
    click1() {
      console.log("鼠标单击");
    },
    click2() {
      console.log("鼠标双击");
    },
    click3() {
      console.log("鼠标按下");
    },
    click4() {
      console.log("鼠标抬起");
    },
    click5() {
      console.log("鼠标抬起");
      this.num++;
    },
    click6() {
      this.num2++;
    },
    click7() {
      this.num3++;
    },
    click8() {
      this.num4++;
    },
    click9() {
      this.num5++;
    },
    click10() {
      console.log(1111);
    },
    key(e) {
      console.log(e);
    },
    clickbox() {
      console.log("事件修饰符");
    }
  }
};
</script>

<style>
.mouse-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mouse-div {
  width: 200px;
  height: 200px;
  border: solid 1px red;
}
</style>