常用事件
目录1. onl oad事件
- onload 加载完成事件：页面加载完成后，对页面js代码进行初始化操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript">
function onl oadFun(){
alert("静态注册onload事件")
}
window.onload = function(){
alert("动态注册onload事件")
}
</script>
</head>
<body onl oad="onloadFun();">
</body>
</html>
<!--
由运行结果可以看出，静态注册的事件需要在body内显式调用，而动态注册的不用
同时，onload事件只能从静态和动态注册中二选一
-->
2. onclick事件
- onclick 单击事件：用于按钮的点击响应操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript">
function onclickFun(){
alert("静态注册onclick事件");
}
window.onload = function(){
//根据id属性获取一个标签对象
var btnObj = document.getElementById("btn01");
//由标签对象调用函数
btnObj.onclick = function(){
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">静态注册</button>
<button id="btn01">动态注册</button>
</body>
</html>
3. onblur事件
- onblur 失去焦点事件：用于输入框失去焦点后验证其输入内容是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript">
function onblurFun(){
alert("静态注册onblur事件");
}
window.onload = function(){
var passwordObj = document.getElementById("password");
passwordObj.onblur = function(){
alert("动态注册onblur事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text"><br/>
</body>
</html>
4. onchange事件
- onchange 内容发生改变事件：用于下拉列表和输入框内容发生改变后的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript">
function onchangeFun(){
alert("静态注册onchange事件");
}
window.onchange = function(){
var listObj = document.getElementById("list");
listObj.onchange = function(){
alert("动态注册onchange事件");
}
}
</script>
</head>
<body>
选择列表A
<select onchange="onchangeFun()">
<option>--请选择--</option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select><br/>
选择列表B
<select id="list">
<option>--请选择--</option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</body>
</html>
5. onsubmit事件
- onsubmit 表单提交事件：用于表单提交前，验证所有表单项是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript">
function onsubmitFun(){
alert("静态注册onsubmit事件");
return false;
}
window.onsubmit= function(){
var formObj = document.getElemntById("form01");
formObj.onsubmit = function(){
alert("动态注册onsubmit事件");
return false;
}
}
</script>
</head>
<body>
<form action="https://www.baidu.com/" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册"/>
</form>
<form action="https://www.baidu.com/" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
6. onscroll事件
-
该事件会在元素的滚动条滚动时触发
//获取id为Info的p元素 var info = document.getElementById("Info"); //为Info绑定一个滚动条滚动事件 info.onscroll = function(){ //检查垂直滚动条是否到底 if(info.scrollHeight - info.scrollTop == info.clientHeight){ alert("滚动条已经到底了！"); } }
7. onm ousemove事件
-
该事件会在鼠标在元素中移动时触发
//当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标 var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); areaDiv.onmousemove = function(event){ //clientX/Y可以获取鼠标指针的水平/垂直坐标 var x = event.clientX; var y = event.clientY; showMsg.innerHTML = "x = " + x + " , y = " + y; }
8. onm ousedown & onm ouseup事件
-
该事件会在鼠标按下或松开时触发
//实现拖拽效果 box.onmousedown = function () { let ol = event.pageX - box.offsetLeft; let ot = event.pageY - box.offsetTop; document.onmousemove = function () { let left = event.pageX - ol; let top = event.pageY - ot; box.style.left = left + "px"; box.style.top = top + "px"; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } }
9. onwheel事件
-
该事件会在滚轮滚动时触发
//鼠标滚轮向下滚动时，方块变高，反之变矮 box.onwheel = function(event){ if(event.wheelDelta > 0){ box.style.height = box.clientHeight - 10 + "px"; }else{ box.style.height = box.clientHeight + 10 + "px"; } }
10. onkeydown & onkeyup事件
-
该事件会在键盘按下或松开时触发
-
对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发
当onkeydown连续触发时，第一次和第二次之间会间隔一会，这种设计是为了防止误操作
-
键盘事件一般会绑定给一些可以获取到焦点的对象或document
document.onkeydown = function (event) { switch (event.key) { case "a": box.style.left = box.offsetLeft - 10 + "px"; break; case "d": box.style.left = box.offsetLeft + 10 + "px"; break; case "w": box.style.top = box.offsetTop - 10 + "px"; break; case "s": box.style.top = box.offsetTop + 10 + "px"; break; } } -