【愚公系列】《循序渐进Vue.js 3.x前端开发实践》018-Vue中的事件类型

举报
愚公搬代码 发表于 2025/02/28 23:16:57 2025/02/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在构建现代 web 应用时，事件处理是实现用户交互的核心要素之一。Vue 作为一个流行的前端框架，为开发者提供了一系列强大而灵活的事件处理机制。这使得我们能够方便地响应用户的操作，从而提升应用的互动性和用户体验。

本篇文章将深入探讨 Vue 中的各种事件类型，包括鼠标事件、键盘事件、表单事件等，以及如何在 Vue 组件中有效地使用它们。我们将分析每种事件类型的特点，并提供实用的示例，帮助你更好地理解如何在 Vue 应用中灵活运用事件。

在这里插入图片描述

🚀一、Vue中的事件类型

🔎1.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.left="click">单击事件</div>
       <div @dblclick="dblclick">双击事件</div>
       <input @focus="focus" @blur="blur" @change="change" @select="select"></input>
       <div @mousedown.ctrl.exact="mousedown">鼠标按下</div>
       <div @mouseup="mouseup">鼠标抬起</div>
       <div @mousemove="mousemove">鼠标移动</div>
       <div @mouseout="mouseout" @mouseover="mouseover">鼠标移入移出</div>
       <input @keydown="keydown" @keyup.alt.enter="keyup"></input>
    </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("键盘按键抬起")
                    if (event.key == 'Enter') {
                        console.log("回车键被点击")
                    }
                }

                return {click, dblclick, focus, blur, change, select, mousedown, mouseup, mousemove, mouseout, mouseover, keydown, keyup}
            }
        }
        createApp(config).mount("#Application") 
    </script>
</body>
</html>

在这里插入图片描述

🔎2.代码结构与功能解析

🦋2.1 HTML 结构

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html lang="en">：定义页面的语言为英语。
  • <meta charset="UTF-8">：定义文档字符集为 UTF-8。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">：保证 IE 浏览器以最新标准渲染页面。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：确保网页在移动设备上显示良好。
  • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN 版本。

🦋2.2 Vue 组件

在 <body> 标签内的内容被 Vue 应用控制，最外层 <div id="Application"> 是 Vue 挂载的目标元素。

  • <div @click.left="click">单击事件</div>：单击事件，使用了 @click.left 表示左键点击触发 click 方法。

  • <div @dblclick="dblclick">双击事件</div>：双击事件，触发 dblclick 方法。

  • <input @focus="focus" @blur="blur" @change="change" @select="select"></input>：为输入框绑定了多个事件：

    • @focus 触发 focus 方法，当输入框获取焦点时触发。
    • @blur 触发 blur 方法，当输入框失去焦点时触发。
    • @change 触发 change 方法，当输入框内容改变时触发。
    • @select 触发 select 方法，当选中输入框内的文本时触发。

  • <div @mousedown.ctrl.exact="mousedown">鼠标按下</div>：鼠标按下事件，使用了 @mousedown.ctrl.exact 表示只有按下 Ctrl 键时触发 mousedown 方法。

  • <div @mouseup="mouseup">鼠标抬起</div>：鼠标抬起事件，触发 mouseup 方法。

  • <div @mousemove="mousemove">鼠标移动</div>：鼠标移动事件，触发 mousemove 方法。

  • <div @mouseout="mouseout" @mouseover="mouseover">鼠标移入移出</div>：鼠标移入移出事件：

    • @mouseout 触发 mouseout 方法，当鼠标移出元素时触发。
    • @mouseover 触发 mouseover 方法，当鼠标移入元素时触发。

  • <input @keydown="keydown" @keyup.alt.enter="keyup"></input>：为输入框绑定了键盘事件：

    • @keydown 触发 keydown 方法，当按下键盘任意键时触发。
    • @keyup.alt.enter 触发 keyup 方法，并且只在按下 Alt 键和 Enter 键时触发。

🦋2.3 Vue 逻辑

Vue 3 中使用了 Composition API 来编写组件逻辑。

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("键盘按键抬起")
            if (event.key == 'Enter') {
                console.log("回车键被点击")
            }
        }

        return {click, dblclick, focus, blur, change, select, mousedown, mouseup, mousemove, mouseout, mouseover, keydown, keyup}
    }
}
  • click 方法：处理单击事件，输出 “单击事件”。
  • dblclick 方法：处理双击事件，输出 “双击事件”。
  • focus 方法：处理获取焦点事件，输出 “获取焦点”。
  • blur 方法：处理失去焦点事件，输出 “失去焦点”。
  • change 方法：处理内容改变事件，输出 “内容改变”。
  • select 方法：处理文本选中事件，输出 “文本选中”。
  • mousedown 方法：处理鼠标按键按下事件，输出 “鼠标按键按下”。
  • mouseup 方法：处理鼠标按键抬起事件，输出 “鼠标按键抬起”。
  • mousemove 方法：处理鼠标移动事件，输出 “鼠标移动”。
  • mouseout 方法：处理鼠标移出事件，输出 “鼠标移出”。
  • mouseover 方法：处理鼠标移入事件，输出 “鼠标移入”。
  • keydown 方法：处理键盘按键按下事件，输出 “键盘按键按下”。
  • keyup 方法：处理键盘按键抬起事件，输出 “键盘按键抬起”。并且，当按下的键是 Enter 时，输出 “回车键被点击”。
createApp(config).mount("#Application")
  • createApp(config) 创建了一个 Vue 应用，并通过 mount("#Application") 将其挂载到页面上 id 为 Application 的元素上。

🔎3.事件处理逻辑

🦋3.1 单击事件 (@click.left="click")

  • @click.left 语法表示只有在 鼠标左键 被点击时，才会触发 click 方法。
  • 在 click 方法中，会输出 “单击事件” 到控制台。此事件会响应鼠标左键的单击动作。

🦋3.2 双击事件 (@dblclick="dblclick")

  • @dblclick 绑定双击事件，意味着当用户快速连续点击某个元素时，将会触发 dblclick 方法。
  • 在 dblclick 方法中，会输出 “双击事件” 到控制台。

🦋3.3 输入框事件（焦点、失焦、内容变化、文本选中）

  • @focus="focus"：当输入框获得焦点时触发 focus 方法，输出 “获取焦点”。
  • @blur="blur"：当输入框失去焦点时触发 blur 方法，输出 “失去焦点”。
  • @change="change"：当输入框的内容发生改变时触发 change 方法，输出 “内容改变”。例如，输入框中的文字被修改。
  • @select="select"：当用户选中输入框中的文本时触发 select 方法，输出 “文本选中”。

🦋3.4 鼠标按下事件 (@mousedown.ctrl.exact="mousedown")

  • @mousedown.ctrl.exact 表示只有在按住 Ctrl 键的同时按下鼠标左键时，才会触发 mousedown 方法。
  • mousedown 方法输出 “鼠标按键按下” 到控制台。

🦋3.5 鼠标抬起事件 (@mouseup="mouseup")

  • @mouseup 绑定鼠标抬起事件。当鼠标按键释放时，触发 mouseup 方法，输出 “鼠标按键抬起”。

🦋3.6 鼠标移动事件 (@mousemove="mousemove")

  • @mousemove 绑定鼠标移动事件。当鼠标在元素内移动时，触发 mousemove 方法，输出 “鼠标移动”。这种事件会持续响应鼠标移动。

🦋3.7 鼠标移入移出事件 (@mouseout="mouseout" @mouseover="mouseover")

  • @mouseout 绑定鼠标移出事件，当鼠标离开元素时触发 mouseout 方法，输出 “鼠标移出”。
  • @mouseover 绑定鼠标移入事件，当鼠标进入元素时触发 mouseover 方法，输出 “鼠标移入”。

🦋3.8 键盘事件（按下和释放）

  • @keydown="keydown"：当用户按下任意键时，触发 keydown 方法，输出 “键盘按键按下”。
  • @keyup.alt.enter="keyup"：当用户释放键盘按键时，触发 keyup 方法。如果同时按下了 Alt 键和 Enter 键，会触发这个事件，输出 “键盘按键抬起” 和 “回车键被点击”。

🦋3.9 事件修饰符

Vue 事件系统还支持一些事件修饰符，它们用于进一步控制事件的触发条件。代码中的修饰符包括：

  • .left：确保事件只有在鼠标左键点击时才会触发（比如 @click.left）。
  • .ctrl：仅当用户按住 Ctrl 键时才触发事件（比如 @mousedown.ctrl.exact）。
  • .exact：确保只有满足精确条件时，事件才会触发。例如，@mousedown.ctrl.exact 仅在按住 Ctrl 键时才会触发鼠标按下事件。
  • .alt.enter：此修饰符表示只有按下 Alt 键并同时按下 Enter 键时，才会触发 keyup 事件。

🔎4.总结

  • Vue 3 的事件绑定机制：通过 @事件名称 语法，Vue 会自动监听 HTML 元素上的事件，并调用相应的事件处理方法。Vue 3 提供了更灵活的事件处理方式，允许在事件绑定时使用修饰符（如 .left、.ctrl）来控制事件的触发条件。
  • Composition API：代码中使用了 Vue 3 的 Composition API 来组织逻辑。在 setup() 方法内定义了所有的事件处理方法，并将这些方法通过 return 返回，使得它们可以在模板中绑定到相应的 DOM 元素上。
  • 事件处理函数：每个事件都有对应的处理函数（例如 click、dblclick 等），这些函数中会输出相关的日志信息，帮助开发者调试和确认事件是否成功触发。

🔎5.潜在的改进和注意事项

  1. 事件处理函数中的 event 参数：

    • 在 keyup 函数中，检查 event.key == 'Enter' 来判断是否按下了回车键。这种方式对开发者有帮助，但需要确保对所有键盘事件的处理更加严谨。

  2. 事件阻止和修饰符：

    • 有些情况下，可能需要阻止默认行为或停止事件传播（例如通过 .prevent 或 .stop 修饰符）。如果要在某些事件中禁止默认操作，可以考虑增加这些修饰符。例如，@submit.prevent 用于阻止表单提交的默认行为。

  3. CSS 和样式：

    • 本例没有涉及样式，但为了提升用户体验，通常需要为这些交互事件提供视觉反馈（如按钮被点击时高亮，输入框获取焦点时显示不同的边框等）。

  4. 性能优化：

    • 如果页面上有大量的鼠标或键盘事件（例如 mousemove、keydown 等），可以考虑对这些事件进行优化，如使用 防抖 或 节流 技术，避免频繁调用事件处理函数带来的性能问题。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入