常用事件类型

admin · 发表于 2024-12-25 15:24:46

简单理解事件：鼠标动作和键盘动作，都是事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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"
@input="input"
@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 APP = {
data() {
return {
}
},
methods: {
click() {
console.log("单击事件")
},
dblclick() {
console.log("双击事件")
},
focus() {
console.log("获取聚焦事件")
},
blur() {
console.log("失去聚焦事件")
},
change() {
console.log("元素内容改变事件，输入框结束后，如果内容改变，则触发")
},
input() {
console.log("输入框内容改变事件，输入框内容改变，则触发")
},
select() {
console.log("元素内容选择选中，输入框内容选中，则触发")
},
mousedown() {
console.log("鼠标按下事件")
},
mouseup() {
console.log("鼠标抬起事件")
},
mousemove() {
console.log("鼠标移动事件")
},
mouseout() {
console.log("鼠标移出事件")
},
mouseover() {
console.log("鼠标移入事件")
},
keydown() {
console.log("键盘按下事件")
},
keyup() {
console.log("键盘抬起事件")
}
}
}
Vue.createApp(APP).mount("#Application")
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

常用事件类型

浏览过的版块

众神之神