JavaScript 中的事件
1、js中的各类事件
2、onload 加载完成事件
3、onclick 单击事件
4、onblur 失去焦点事件
5、onchange 内容发生改变事件
6、onsubmit 表单提交事件
1、js 中的事件：
常用的事件：
onload 加载完成事; 页面加载完成之后，常用于做页面js代码初始化操作
onclick 单击事件; 常用于按钮的点击响应操作
onblur 失去焦点事件; 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件; 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件; 常用于表单提交前，验证所有表单项是否合法。事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。静态注册事件：
通过html标签的事件直接赋予事件响应后的代码，这种方式我们叫做静态注册
动态注册事件：
是指通过js代码得到的标签dom对象，然后在通过dom对象.事件名 = function(){} 这种形式
赋予事件响应后的代码，叫动态注册动态注册的基本步骤：
1、获取标签对象
2、标签对象.事件名 = function(){}
2、onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//onload 事件的方法
function onloadFun() {
alert('静态注册onload事件,所有代码')
}
//onload 事件的动态注册。是固定写法
window.onload = function () {
alert('静态注册onload事件,所有代码')
}
</script>
</head>
<!--静态注册onload事件
onload 事件是浏览器解析完页面之后就是自动触发的事件
<body onload="onloadFun()">
-->
<body>
</body>
</html>
3、onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onclickFun() {
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function () {
//1、获取标签对象
/**
* document 是javascript语言提供的一个对象（文档）
* get 获取
* Element 元素（就是标签）
* By 通过。。。 由。。。 经。。
* Id id属性
*
* getElementById 通过id属性获取标签对象
*/
var btnObj = document.getElementById("btn01")
//2、通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("静态注册onclick 02事件")
}
}
</script>
</head>
<body>
<!--静态注册onclick事件 -->
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
4、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("静态注册失去焦点事件")
}
//动态注册失去焦点事件
window.onload = function () {
//获取标签对象
var pwdObj = document.getElementById("pwd")
//alert(pwdObj)
//通过标签对象.事件名 = function(){}
pwdObj.onblur = function () {
console.log("动态失去焦点事件")
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br>
密码： <input id="pwd" type="text"><br>
</body>
</html>
5、onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("It is my major！！")
}
window.onload = function () {
//1、获取标签对象
var selObj = document.getElementById("sel01")
//alert("It is my favorite teacher")
//2、通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("It is my favorite teacher")
}
}
</script>
</head>
<body>
<!--静态注册onchange事件-->
请选择你喜欢的科目：
<select onchange="onchangeFun()">
<option>---科目---</option>
<option>JavaScript</option>
<option>php</option>
<option>Python</option>
<option>Java</option>
</select>
<!--动态注册onchange事件-->
请选择你喜欢的老师：
<select id="sel01">
<option>---老师---</option>
<option>住个村夫</option>
<option>上官瑞</option>
<option>王批发</option>
<option>猪大肠</option>
</select>
</body>
</html>
6、onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册表单提交事件
function onsubmitFun() {
//要验证所有表单项是否合法,如果有一个不合法，就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return false; //不提交
//return true; //提交
}
window.onload = function () {
//1、获取标签对象
var subObj = document.getElementById("form01");
//alert(subObj)
//2、通过标签对象.事件名 = function(){}
subObj.onsubmit = function () {
alert("动态注册表单提交事件----发现不合法");
return false; //不提交
//return true; //提交
}
}
</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>
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
