什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。 常用的事件:
- onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
- onclick 单击事件: 常用于按钮的点击响应操作。
- onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。 事件的注册又
分为静态注册和动态注册两种
: 什么是事件的注册(绑定)? 其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。 静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。 动态注册事件:是指先通过 js 代码得到标签的 dom 对象 然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码,叫动态注册。 动态注册基本步骤: 1、获取标签对象 2、标签对象.事件名 = fucntion(){}
onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun() {
alert('静态注册 onload 事件,所有代码');
}
window.onload = function () {
alert("动态注册的 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
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 () {
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html>
onblur 失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册失去焦点事件");
}
window.onload = function () {
var passwordObj = document.getElementById("password");
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
var selObj = document.getElementById("sel01");
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神:
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>小龙女</option>
<option>迪丽热巴</option>
<option>古力娜扎</option>
</select>
请选择你心中的男神:
<select id="sel01">
<option>--男神--</option>
<option>杨过</option>
<option>孙杨</option>
<option>杨洋</option>
</select>
</body>
</html>
onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
function onsubmitFun(){
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
|