JavaScript-onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
*/
//onload事件的方法
function onloadFun() {
alert('静态注册onload事件,所有代码');
}
//onload事件动态注册。是固定写法
window.onload = function () {}
alert("动态注册的onload事件");
</script>
</head>
<!-- 静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun()">
-->
<body onload="onloadFun()">
</body>
</html>
JavaScript-onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
onclick 单击事件: 常用于按钮的点击响应操作。
*/
function onclickFun(){
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function () {
// 1. 获取标签对象
/*
document 是 JavaScript 语言提供的一个对象(文档)
get 获取
Element 元素(就是标签)
By 通过。。 由。。经。。
Id id属性
getElementById通过id属性获取标签对象
*/
var btnObj = document.getElementById("btn01");
alert(btnObj);
// 2. 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的onclick事件")
}
}
</script>
</head>
<body>
<!-- 静态注册onClick事件
-->
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
JavaScript-onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
*/
// 静态注册失去焦点事件
function onblurFun() {
// console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur 事件
window.onload = function () {
//1. 获取标签对象
var passwordObj = document.getElementById("password");
alert(passwordObj);
//2. 通过标签对象.事件名 = function(){}
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件")
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br/>
密码:<input id="password" type="text"><br/>
</body>
</html>
JavaScript-onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
*/
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1. 获取标签对象
var selObj = document.getElementById("sel01");
alert(selObj);
//2. 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了")
}
}
</script>
</head>
<body>
请选择你心中的女神:
<!-- 静态注册onchange事件 -->
<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>
JavaScript-onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
*/
//静态注册表单提交事件
function onsubmitFun() {
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return false;
}
window.onload = function () {
//1. 获取标签对象
var formObj = document.getElementById("form01");
alert(formObj);
//2. 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!-- return false 可以阻止 表单提交 -->
<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>