1、事件介绍
事件是电脑输入设备与页面进行交互的响应。常见的事件有：
- onload加载完成事件
页面加载完成之后，常用于做页面JS代码初始化操作 - onclick单击事件
常用于按钮的点击响应 - onblur失去焦点事件
常用于输入框失去焦点后验证其输入内容是否合法 - onchange内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作 - onsubmit表单提交事件
常用于表单提交前，验证所有表单项是否合法
2、事件的注册
事件的注册（事件的绑定）就是告诉浏览器，当事件响应后要执行哪些操作代码。事件的注册有两种方式：
- 静态注册
通过html标签的事件属性直接赋予事件响应后的代码，称静态注册 - 动态注册
指先通过js代码得到标签的dom对象，然后再通过dom对象 . 事件名=function(){}这种形式赋予事件响应后的代码，称动态注册。
动态注册的步骤：
- 获取标签对象
- 标签对象.事件名=function(){}
3、onload加载完成事件
onload事件是浏览器解析完页面之后就会自动触发的事件
静态注册写法
//方式：body标签加onload属性
.....
<body onload="alert('静态注册online事件触发')">
.....
</body>
运行效果：
当onload时要执行的代码不止一句时，可在<script>中先定义一个onload事件的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义onload事件的方法
function onloadFun(){
alert('这里是静态注册onload事件的所有代码');
}
</script>
</head>
//在body标签的onload属性中直接调用方法
<body onload="onloadFun();">
</body>
</html>
运行效果：
动态注册写法
// 方式：window.οnlοad=function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义方法的格式window.οnlοad= function(){}
window.onload = function(){
alert("动态注册onload事件");
}
</script>
</head>
<!--body标签不再加事件属性-->
<body>
</body>
</html>
运行效果：
4、onclick单击事件
静态注册写法
// 方式：在button标签中加onclick属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义oncick方法
function onclickFun(){
alert("静态注册onclick事件");
}
</script>
</head>
<body>
<!--button标签中加onclick属性-->
<button onclick="onclickFun();">按钮1</button>
<button>按钮2</button>
</body>
</html>
运行效果：
动态注册写法
// 方式：
- window.onload = function(){
- 获取标签对象
- 通过标签对象.时间名 = function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//window.onload
window.onload = function(){
//document是JS语言提供的一个对象（表示整个页面文档）
//getElementById方法即通过标签的id属性获取标签对象
var btnObj = document.getElementById("btn01");
//标签对象.事件名=function(){}
btnObj.onclick = function(){
alert("动态注册onclick事件代码");
}
}
</script>
</head>
<body>
<!--button加id属性-->
<button id="btn01">按钮</button>
</body>
</html>
运行效果：
关于其中的对象btnObj，可以alert一下看看：
5、onblur失去焦点事件
onblur事件常用于输入框失去焦点以后验证其输入内容是否合法
静态注册写法
// 方式：对应标签中加入onblur属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurFun(){
//console是控制台对象，是由JS语言提供的专门用来向浏览器的控制器打印输出，作测试使用
//log()是打印的方法
console.log("静态注册失去焦点事件的code");
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
密码：<input type="text"><br/>
</body>
</html>
运行效果：
动态注册写法
// 方式：
- window.onload = function(){
- 获取标签对象
- 通过标签对象.时间名 = function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurFun(){
console.log("静态注册失去焦点事件的code");
}
//动态注册失去焦点事件
window.onload = function(){
var passwordObj = document.getElementById("password");
passwordObj.onblur = function(){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
<!--密码框新增id属性，方便获取标签对象方法调用-->
密码：<input type="text" id="password"><br/>
</body>
</html>
运行效果：
6、onchange内容发生改变事件
onchange事件常用于下拉列表和输入框内容发生改变后操作
静态注册写法
// 方式：对应标签中加入onchange属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun(){
alert("答案修改成功！");
}
</script>
</head>
<body>
请选择正确的答案：
<select onchange="onchangeFun();">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</body>
</html>
运行效果：
动态注册写法
// 方式：
- window.onload = function(){
- 获取标签对象
- 通过标签对象.时间名 = function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function(){
var selectObj = document.getElementById("select");
selectObj.onchange = function(){
alert("动态注册onchange");
}
}
</script>
</head>
<body>
请选择正确的答案：
<select id="select">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</body>
</html>
运行效果：
7、onsubmit表单提交事件
onsubmit事件常用于在表单提交前，验证所有表单项是否合法
静态注册写法
// 方式：对应标签中加入onsubmit属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitFun(){
alert("onsubmit静态注册code");
//这里应该验证提交的表单信息是否合法
//不合法就阻止表单提交(这里不加判断，直接返回个false做测试)
return false
}
</script>
</head>
<body>
<!--return false可以阻止表单提交-->
<!--注意return onsubmirFun();中的return别忘记加-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
</body>
</html>
动态注册写法
// 方式：
- window.onload = function(){
- 获取标签对象
- 通过标签对象.时间名 = function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function(){
var formObj = document.getElementById("form01");
formObj.onsubmit = function(){
alert("onsubmit动态注册code");
//阻止提交
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
运行效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/146108.html
