事件
事件是电脑输入设备与页面进行交互的相应。
常用的事件:
- onload 加载完成事件;常用于做页面 js 代码的初始化操作
- onclick 单击事件;常用于按钮的点击响应操作
- onblur 失去焦点事件;常用于输入框失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件;常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件;常用于表单提交前,验证其是否合法
事件的注册
告诉浏览器,事件响应后要执行哪些操作的代码
静态注册:通过html标签的事件属性直接赋予事件响应后的代码
动态注册:先通过js代码得到标签的dom对象,然后在通过该对象.事件名 = function(){}
基本步骤:
- 获取标签对象
- 标签对象.事件名 = function(){}
onload事件
静态
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onloadTest(){
alert("hihhihi");
}
</script>
</head>
<body onload="onloadTest();">
</body>
</html>
动态
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript">
window.onload = function (){
alert("dong tai")
}
</script>
</head>
<body>
</body>
</html>
onclick事件
静态注册
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onclickFun() {
alert("jing tai")
}
</script>
</head>
<body>
<button onclick="onclickFun()">123</button>
</body>
</html>
动态
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function (){
// 1.获取标签对象
var btobj = document.getElementById("bt01");
/*
* document 是JavaScript语言提供的一个对象
* 通过id获取标签
*/
// 通过标签对象.事件名 = function(){}
btobj.onclick = function () {
alert("动态注册的网站")
}
}
</script>
</head>
<body>
<button id="bt01">123</button> <br>
</body>
</html>
onblur事件
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// jing tai
function onblurFun() {
alert("jing tai");
// console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
// log是打印的方法
console.log("jing tai shu chu ");
}
// dong tai
window.onload = function (){
// 1.获取标签对象
var pwdObj = document.getElementById("pwd");
pwdObj.onblur = function () {
console.log("dong tai");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br>
密码:<input type="text" id="pwd"> <br>
</body>
</html>
onchange事件
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onchangeFun() {
alert("changed");
}
window.onload = function (){
var sele = document.getElementById("select02");
sele.onchange = function (){
alert("hi")
}
}
</script>
</head>
<body>
<select onchange="onchangeFun()">
<option>123</option>
<option>3443</option>
<option>4545</option>
</select> <br>
<select onchange="onchangeFun()" id="select02">
<option>123</option>
<option>3443</option>
<option>4545</option>
</select> <br>
</body>
</html>
onsubmit
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onsubmitFun() {
alert("changed");
return false; // 如果返回false,那么下面的表单将不会提交,注意下面也要带return
}
window.onload = function (){
var sub = document.getElementById("form01");
sub.onsubmit = function (){
alert("hi");
return false; // 可能发现不合法信息,阻止提交
}
}
</script>
</head>
<body>
<form action="http://localhost:63342/" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="jing tai">
</form> <br>
<form action="http://localhost:63342/" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="dong tai" id="form01">
</form>
</body>
</html>