JavaScript 常用事件大全
发布时间：2023年12月31日
前言
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。
1.鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| oncontextmenu | 鼠标点击右键触发 |
| ondblclick | 鼠标双击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
01.鼠标点击左键触发---- onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onclick = function() {
alert("你好!")
}
</script>
<body>
</body>
</html>
- 显示结果
02.鼠标点击右键触发---- oncontextmenu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.oncontextmenu = function() {
alert("你好!")
}
</script>
<body>
</body>
</html>
03.鼠标双击触发---- ondblclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.ondblclick = function() {
alert("你好!")
}
</script>
<body>
</body>
</html>
04.鼠标经过触发---- onmouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onmouseover= function() {
alert("你好!")
}
</script>
<body>
</body>
</html>
05.鼠标离开触发---- onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onmouseout= function() {
alert("你好!")
}
</script>
<body>
</body>
</html>
06.获得鼠标焦点触发---- onfocus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function show01() {
console.log("你好!")
}
</script>
<body>
<input onfocus="show01()" type="text">
</body>
</html>
07.失去鼠标焦点触发---- onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function show01() {
console.log("你好!")
}
</script>
<body>
<input onblur="show01()" type="text">
</body>
</html>
鼠标移动触发---- onmousemove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onmousemove = function() {
console.log("你好!")
}
</script>
<body>
</body>
</html>
2. 键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等 |
01.某个键盘按键被松开时触发---- onkeyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onkeyup = function () {
console.log("你好!")
}
</script>
<body>
</body>
</html>
02.某个键盘按键被按下时触发---- onkeydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onkeydown= function () {
console.log("你好!")
}
</script>
<body>
</body>
</html>
03.某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等---- onkeypress
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onkeydown= function () {
console.log("你好!")
}
</script>
<body>
</body>
</html>
3. 表单事件
| 表单事件 | 触发条件 |
|---|---|
| onsubmit | 绑定提交事件 |
| onfocus | 聚焦 |
| onblur | 失焦 |
| onchange | 内容改变(在文本框输入数据) + 失焦 才会触发 |
| oninput | 输入事件 |
01 绑定提交事件---- onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 事件-鼠标事件</title>
<script>
window.onload = function () {
var oForm = document.getElementsByTagName("form")[0];
var aInput = document.getElementsByTagName("input")[0];
// 绑定提交事件
oForm.onsubmit = function () {
console.log("提交成功");
// 每次提交都会刷新页面，所以 return False 使其提交失败
// 但提交事件依然发生（为了方便观察才这么做）
return false; // 可以注释观察效果
}
}
</script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
02 聚焦---- onfocus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 事件-鼠标事件</title>
<script>
window.onload = function(){
var oForm = document.getElementsByTagName("form")[0];
var aInput = document.getElementsByTagName("input")[0];
// 焦点（鼠标点击文本框，使其为输入状态）
aInput.onfocus = function(){
console.log("focus(焦点事件)");
}
}
</script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br><hr><br>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
03 失焦---- onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 事件-鼠标事件</title>
<script>
window.onload = function () {
var oForm = document.getElementsByTagName("form")[0];
var aInput = document.getElementsByTagName("input")[0];
// 失焦（鼠标点击文本框外，使其退出输入状态）
aInput.onblur = function () {
console.log("onblur(失焦事件)");
}
}
</script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
04 内容改变---- onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 事件-鼠标事件</title>
<script>
window.onload = function () {
var oForm = document.getElementsByTagName("form")[0];
var aInput = document.getElementsByTagName("input")[0];
// 内容改变(文本框输入数据) + 失焦 才会触发
aInput.onchange = function () {
console.log("内容改变");
}
}
</script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
05 输入事件---- oninput
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 事件-鼠标事件</title>
<script>
window.onload = function () {
var oForm = document.getElementsByTagName("form")[0];
var aInput = document.getElementsByTagName("input")[0];
// 输入事件
aInput.oninput = function () {
console.log("输入中");
}
}
</script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
文章来源:https://blog.csdn.net/mzdxxcdh/article/details/135270672
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！