首页 前端知识 Vue 中常用的事件总结( 事件的概念 事件要素 事件修饰符)

Vue 中常用的事件总结( 事件的概念 事件要素 事件修饰符)

2024-06-19 23:06:17 前端知识 前端哥 958 200 我要收藏

事件概念:

1、是指用户在某事务上由于某种行为所执行的操作; (对页面元素的某种操作)
2、事件是文档或者浏览器窗口中发生的,特定的交互瞬间。
3、事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。
4、事件是javaScript和DOM之间交互的桥梁。


事件三要素:

事件源:是指在哪个元素引发的事件,如:a标签、div标签
事件:事件是指执行的动作 如:使用鼠标单击、双击某标签等
事件驱动程序(事件处理程序):即执行的结果 如:单击button标签所执行的回调函数

事件修饰符:

1.prevent:阻止浏览器默认事件(常用);
​ 2.stop:阻止事件冒泡(常用);
​ 3.once:事件只触发一次(常用);
​ 4.capture:使用事件的捕获模式;
​ 5.self:只有 event.target 是当前操作的元素时才触发事件;
​ 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

一、Click事件(单击事件)

Click事件是基本的交互事件,它被用于处理用户点击页面元素的情况。在Vue中,可以使用@click指令来绑定Click事件

1、用法:

例如:<button @click="handleClick">Click Me!</button>

2、在vue组件中自定义 handleClick 方法,用于处理Click事件:

例如:methods:{

        handleClick(){

        //处理Click事件的逻辑

        }

}

二、Input事件(文本输入事件)

Input事件是用于处理用户输入的事件,通常应用于处理用户填写表单的情况。在Vue中,可以使用v-model指令来绑定Input事件。

1、用法:

例如:<input v-model="text">

2、在Vue组件中定义text数据,用于保存用户输入的文本内容:

例如:data(){

        return{

                text:' '

        }

}

三、Key press事件(键盘按键事件)

Keypress事件是用于处理键盘按键的事件,通常应用于处理用户进行搜索、过滤等操作的情况。在Vue中,可以使用@keypress指令来绑定Keypress事件。

1、用法:

例如:<input @keypress="handleKeypress">

2、在Vue组件中定义handleKeypress方法,用于处理Keypress事件:

例如:methods: {

                handleKeypress(event) {

                      // 处理Keypress事件逻辑

        }

}

四、Submit事件(表单提交事件)

Submit事件是用于处理表单提交的事件,通常应用于处理用户提交表单的情况。在Vue中,可以使用@submit指令来绑定Submit事件。

1、用法:

例如:<form @submit="handleSubmit"><input type="text" v-model="text"></form>

2、在Vue组件中定义handleSubmit方法,用于处理Submit事件:

例如:methods: {

        handleSubmit(event) {

                  event.preventDefault(); // 阻止表单默认提交行为

                // 处理Submit事件逻辑

        }

}

五、Mouseover事件(鼠标悬停事件)

Mouseover事件是用于处理鼠标悬停的事件,通常应用于显示、隐藏元素等操作。在Vue中,可以使用@mouseover指令来绑定Mouseover事件

1、用法:

例如:<div @mouseover="handleMouseover">...

2、在Vue组件中定义handleMouseover方法,用于处理Mouseover事件:

例如:methods: {

        handleMouseover() {

        // 处理Mouseover事件逻辑

        }

}

六、Mouseout事件(鼠标移开事件)

Mouseout事件是用于处理鼠标移开的事件,通常应用于显示、隐藏元素等操作。在Vue中,可以使用@mouseout指令来绑定Mouseout事件。

1、用法:

例如:<div @mouseout="handleMouseout">...

2、在Vue组件中定义handleMouseout方法,用于处理Mouseout事件:

methods: {

                handleMouseout() {

                        // 处理Mouseout事件逻辑

        }

}

鼠标事件:

事件名称何时触发
auxclick已在元素上按下并释放定点设备按钮(ANY非主按钮)。
click在元素上按下并释放任意鼠标按键。
contextmenu右键点击(在右键菜单显示前触发)。
dblclick在元素上双击鼠标按钮。
mousedown在元素上按下任意鼠标按钮。
mouseenter指针移到有事件监听的元素内。
mouseleave指针移出元素范围外(不冒泡)。
mousemove指针在元素内移动时持续触发。
mouseover指针移到有事件监听的元素或者它的子元素内。
mouseout指针移出元素,或者移到它的子元素上。
mouseup在元素上释放任意鼠标按键。
pointerlockchange鼠标被锁定或者解除锁定发生时。
pointerlockerror可能因为一些技术的原因鼠标锁定被禁止时。
select有文本被选中。
wheel滚轮向任意方向滚动。

焦点事件

事件名称何时触发
focus元素获得焦点(不会冒泡)。
blur元素失去焦点(不会冒泡)。

WebSocket 事件:

事件名称何时触发
openWebSocket 连接已建立。
message通过 WebSocket 接收到一条消息。
errorWebSocket 连接异常被关闭(比如有些数据无法发送)。
closeWebSocket 连接已关闭。

CSS 动画事件:

事件名称何时触发
animationstart某个 CSS 动画开始时触发。
animationend某个 CSS 动画完成时触发。
animationiteration某个 CSS 动画完成后重新开始时触发。

CSS 过渡事件:

事件名称何时触发
transitionstart

CSS转换实际上已经开始(在任何延迟之后激发)。

transitioncancelCSS转换已被取消
transitionendCSS转换已完成。
transitionrunCSS转换已开始运行(在任何延迟开始之前激发)。

表单事件:

事件名称何时触发
reset点击重置按钮时
submit点击提交按钮

键盘事件:

事件名称何时触发
keydown按下任意按键。
keypress除 Shift、Fn、CapsLock 外的任意键被按住。(连续触发。)
keyup释放任意按键。

拖放事件:

事件名称何时触发
drag正在拖动元素或文本选区(在此过程中持续触发,每 350ms 触发一次)
dragend拖放操作结束。(松开鼠标按钮或按下 Esc 键)
dragenter被拖动的元素或文本选区移入有效释放目标区
dragstart用户开始拖动HTML元素或选中的文本
dragleave被拖动的元素或文本选区移出有效释放目标区
dragover被拖动的元素或文本选区正在有效释放目标上被拖动 (在此过程中持续触发,每350ms触发一次)
drop元素在有效释放目标区上释放

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12849.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!