事件概念:
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 事件:
事件名称 | 何时触发 |
---|---|
open | WebSocket 连接已建立。 |
message | 通过 WebSocket 接收到一条消息。 |
error | WebSocket 连接异常被关闭(比如有些数据无法发送)。 |
close | WebSocket 连接已关闭。 |
CSS 动画事件:
事件名称 | 何时触发 |
---|---|
animationstart | 某个 CSS 动画开始时触发。 |
animationend | 某个 CSS 动画完成时触发。 |
animationiteration | 某个 CSS 动画完成后重新开始时触发。 |
CSS 过渡事件:
事件名称 | 何时触发 |
---|---|
transitionstart | CSS转换实际上已经开始(在任何延迟之后激发)。 |
transitioncancel | CSS转换已被取消 |
transitionend | CSS转换已完成。 |
transitionrun | CSS转换已开始运行(在任何延迟开始之前激发)。 |
表单事件:
事件名称 | 何时触发 |
---|---|
reset | 点击重置按钮时 |
submit | 点击提交按钮 |
键盘事件:
事件名称 | 何时触发 |
---|---|
keydown | 按下任意按键。 |
keypress | 除 Shift、Fn、CapsLock 外的任意键被按住。(连续触发。) |
keyup | 释放任意按键。 |
拖放事件:
事件名称 | 何时触发 |
---|---|
drag | 正在拖动元素或文本选区(在此过程中持续触发,每 350ms 触发一次) |
dragend | 拖放操作结束。(松开鼠标按钮或按下 Esc 键) |
dragenter | 被拖动的元素或文本选区移入有效释放目标区 |
dragstart | 用户开始拖动HTML元素或选中的文本 |
dragleave | 被拖动的元素或文本选区移出有效释放目标区 |
dragover | 被拖动的元素或文本选区正在有效释放目标上被拖动 (在此过程中持续触发,每350ms触发一次) |
drop | 元素在有效释放目标区上释放 |