viceen
于 2022-07-06 09:28:59 发布
756
收藏 3
分类专栏： html和css 文章标签： html javascript 前端
版权
html和css
专栏收录该内容
5 篇文章0 订阅
订阅专栏
HTML中的DOM事件——鼠标事件、键盘事件、框架/对象事件、表单事件
1. 什么是事件
是通过用户进行触发的一些行为。比如：点击、双击、键盘按下抬起等等都称为事件。
事件在触发的时候会产生一个事件对象。
2.事件的添加方式
在标签内添加事件名称，并调用对应的事件处理函数
<body>
<button id="box" onclick="a()">按钮</button>
</body>
<script>
function a() {
console.log("点击了");
}
</script>
通过获取 DOM 对象，然后添加事件，并赋值的事件的处理函数。
<body>
<button id="box">按钮</button>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
// 给元素添加事件
box.onclick = function (event) {
console.log("点击了");
console.log(event);
};
</script>
通过监听的方式添加事件。
<body>
<button id="btn">按钮</button>
</body>
<script>
var btn = document.getElementById("btn");
// 通过添加事件的监听
// 第一个参数是事件的类型
// 第二个参数是事件的处理函数
btn.addEventListener("click", function (event) {
console.log("点击了");
console.log(event);
});
</script>
3. 鼠标事件
3.1 单机事件 onclick
3.2 双击事件 ondblclick
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.ondblclick = function () {
console.log("双击了");
};
</script>
3.3 鼠标按下事件 onmousedown
鼠标在某一个元素中进行按下操作时会触发
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmousedown = function () {
console.log("鼠标按下");
};
</script>
3.4 鼠标抬起事件 onmouseup
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmouseup = function () {
console.log("鼠标抬起");
};
</script>
3.5 鼠标进入事件 onmouseenter
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmouseenter = function () {
console.log("鼠标进入");
};
</script>
3.6 鼠标离开事件 onmouseleave
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmouseleave = function () {
console.log("鼠标离开");
};
</script>
3.7 鼠标移动事件 onmousemove
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmousemove = function () {
console.log("鼠标移动");
};
</script>
3.8 鼠标移入 onmouseover
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmouseover = function () {
console.log("鼠标移入");
};
</script>
3.9 鼠标移除 onmouseout
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 获取DOM对象
var box = document.getElementById("box");
box.onmouseout = function () {
console.log("鼠标移出");
};
</script>
4. 键盘事件
4.1 某个键盘按键被按下：onkeydown
<script>
document.body.onkeydown = function (event) {
console.log(event.keyCode); // 获取键盘按键的键码
console.log("键盘按下");
};
</script>
4.2 某个键盘按键被松开：onkeyup
<script>
document.body.onkeyup = function (event) {
console.log(event.keyCode); // 获取键盘按键的键码
console.log("键盘抬起");
};
</script>
4.3 某个键盘按键被按下并松开：onkeypress
<script>
document.body.onkeypress = function (event) {
console.log(event.keyCode); // 获取键盘按键的键码
console.log("键盘按下并抬起");
};
</script>
5. 框架/对象(Frame/Object) 事件
5.1 一张页面或一幅图像完成加载：onload
<head>
<script>
// 页面加载事件 这个事件通过情况下绑定在 window
window.onload = function () {
foo();
var box = document.getElementById("box");
console.log(box);
};
function foo() {
console.log("foo");
}
</script>
</head>
<body>
<div id="box"></div>
</body>
5.2 当文档被滚动时发生的事件：onscroll
<head>
<style>
#box {
height: 3000px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
window.document.onscroll = function () {
console.log("滚动事件触发了");
// 获取文档滚动的高度
var top = document.documentElement.scrollTop;
console.log(top);
};
</script>
5.3 窗口或框架被重新调整大小：onscroll
<script>
window.onresize = function () {
console.log("窗口大小变化了");
};
</script>
6. 表单事件
6.1 元素失去焦点时触发：onblur
<body>
<form action="" method="get">
<p>
用户名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onblur = function () {
console.log("失焦了");
};
</script>
6.2 该事件在表单元素改变时触发：onchange
<body>
<form action="" method="get">
<p>
用户名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onchange = function () {
// 当你失焦了才能触发 或者 回车
console.log("输入了");
};
</script>
6.3 元素获取焦点时触发：onfocus
<body>
<form action="" method="get">
<p>
用户名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onfocus = function () {
console.log("获取焦点");
};
</script>
6.4 元素获取用户输入时触发：oninput
<body>
<form action="" method="get">
<p>
用户名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.oninput = function () {
// 当每输入一个值的时候就触发
console.log("oninput事件触发了");
};
</script>
6.5 表单提交时触发：onsubmit
<body>
<form id="form" action="" method="get" onsubmit="login()">
用户名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
// 表单的处理函数
function login() {
alert("表单已经提交了");
}
var form = document.getElementById("form");
form.onsubmit = function () {
alert("登陆");
// 组织表单的默认行为 阻止一直刷新
// event.preventDefault();
return false
};
</script>
————————————————
版权声明：本文为CSDN博主「viceen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44867717/article/details/125632882
联系客服
