Vue常用事件大全（附带实例）

事件本身是有类型之分的，例如使用 @click 绑定的就是元素的单击事件，如果需要通过用户鼠标操作行为来实现更加复杂的交互逻辑，则需要监听更加复杂的鼠标事件。

常用的交互事件列举如下表所示：

表：常用的事件列表
事件	意义	可用的元素
click	单击事件，当组件被单击时触发	大部分 HTML 元素
dblclick	双击事件，当组件被双击时触发	大部分 HTML 元素
focus	获取焦点事件，例如输入框开启编辑模式时触发	input、select、textarea 等
blur	失去焦点事件，例如输入框结束编辑模式时触发	input、select、textarea 等
change	元素内容改变事件，输入框结束输入后，如果内容有变化就会触发此事件	input、select、textarea 等
select	元素内容选中事件，输入框中的文本被选中时会触发此事件	input、select、textarea 等
mousedown	鼠标按键被按下事件	大部分 HTML 元素
mouseup	鼠标按键抬起事件	大部分 HTML 元素
mousemove	鼠标在组件内移动事件	大部分 HTML 元素
mouseout	鼠标移出组件时触发	大部分 HTML 元素
mouseover	鼠标移入组件时触发	大部分 HTML 元素
keydown	键盘按键被按下	HTML 中所有表单元素
keyup	键盘按键被抬起	HTML 中所有表单元素

对于上面列举的事件类型，可以编写示例代码来理解其触发的时机。新建一个名为 eventType.html 的文件，编写测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件类型</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="Application">
    <div @click="click">单击事件</div>
    <div @dblclick="dblclick">双击事件</div>

    <input @focus="focus"
           @blur="blur"
           @change="change"
           @select="select" />

    <div @mousedown="mousedown">鼠标按下</div>
    <div @mouseup="mouseup">鼠标抬起</div>
    <div @mousemove="mousemove">鼠标移动</div>
    <div @mouseout="mouseout"
         @mouseover="mouseover">鼠标移入移出</div>

    <input @keydown="keydown"
           @keyup="keyup" />
  </div>

  <script>
    const { createApp } = Vue;

    const config = {
      setup() {
        const click     = () => console.log("单击事件");
        const dblclick  = () => console.log("双击事件");
        const focus     = () => console.log("获取焦点");
        const blur      = () => console.log("失去焦点");
        const change    = () => console.log("内容改变");
        const select    = () => console.log("文本选中");
        const mousedown = () => console.log("鼠标按键按下");
        const mouseup   = () => console.log("鼠标按键抬起");
        const mousemove = () => console.log("鼠标移动");
        const mouseout  = () => console.log("鼠标移出");
        const mouseover = () => console.log("鼠标移入");
        const keydown   = () => console.log("键盘按键按下");
        const keyup     = (event) => console.log("键盘按键抬起");

        return {
          click, dblclick, focus, blur, change, select,
          mousedown, mouseup, mousemove, mouseout, mouseover,
          keydown, keyup
        };
      }
    };

    createApp(config).mount("#Application");
  </script>
</body>
</html>

对于每一种类型的事件，我们都可以通过 Event 对象来获取事件的具体信息。例如，在鼠标单击事件中，可以获取到用户具体单击的是左键或右键。

Vue常用事件大全（附带实例）

相关文章