1、事件介绍
1. 事件是电脑输入设备与页面进行交互的响应
2. 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
事件分类
1. 事件的注册（绑定）
事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
2. 静态注册事件
通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
3. 动态注册事件(
通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式叫动态注册
动态注册事件步骤
1. 获取标签<--->dom 对象
2. dom 对象.事件名 = fucntion(){}
2、onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
//定义了一个函数
function sayOK() {
alert('静态注册 onload 事件sayOK');
}
//1. 在js中，将页面窗口 映射成 window dom对象
//2. window对象有很多的函数和属性，可以使用
//3. window.onload 表示页面被加载完毕
//4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
//5. 加载完毕表示页面元素全部创建好，js 是解释性语言
window.onload = function () {
alert("动态注册 onload 事件");
}
</script>
</head>
<!--静态注册-->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>
3、onclick点击事件
<head>
<meta charset="UTF-8">
<title>onclick 单击事件</title>
<script type="text/javascript">
function sayOK() {
alert("你点击了sayOK按钮");
}
//当页面加载完毕后，我们再进行动态绑定
//基本概念和机制一定要清楚!!!
window.onload = function () {
// 动态注册 onclick 事件
//1. 先拿到 id=btn01 的 button对应dom对象
//2. 通过 dom对象动态的绑定onclick事件
//3. 通过document的 getElementById获取对应的dom对象
// 不放在window.onload中，对象还未创建完成就已经执行了，此时未绑定成功
// 放在window.onload中时，对象创建完才执行里面的语句
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
alert("你点击了sayHi按钮");
}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK按钮</button>
<button id="btn01">sayHi按钮</button>
</body>
4、onblur失去焦点事件
<head>
<meta charset="UTF-8">
<title>onblur 失去焦点事件</title>
<script type="text/javascript">
//静态绑定
function upperCase() {
//1. 先得到fname 输入框的value -> 得到对应dom对象
var fname = document.getElementById("fname");
fname.value = fname.value.toUpperCase();
}
//在页面加载完毕，完成动态绑定
window.onload = function () {
//1.得到fname2的dom对象
var fname2 = document.getElementById("fname2");
fname2.onblur = function () {
fname2.value = fname2.value.toUpperCase();
}
}
</script>
</head>
<body>
输入英文单词：
<input type="text" id="fname" onblur="upperCase()" /><br />
输入英文单词：
<input type="text" id="fname2" />
</body>
5、onchange内容发送改变事件
<head>
<meta charset="UTF-8">
<title>onchange 内容发生改变事件</title>
<script type="text/javascript">
function mySal() {
alert("工资范围变化了~");
}
//动态注册
window.onload = function () {
//获取到sel01的dom对象
var sel01 = document.getElementById("sel01");
//给sel01绑定onchange事件
sel01.onchange = function () {
alert("你换女友的~");
}
}
</script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()">
<option>--工资范围--</option>
<option>10k以下</option>
<option>10k-30k</option>
<option>30k以上</option>
</select> <br/>
你当前女友是谁：
<select id="sel01"> <!-- 动态绑定 onchange-->
<option>---女友---</option>
<option>艳红</option>
<option>春桃</option>
<option>春花</option>
</select>
</body>
6、onsubmit表单提交事件
注意：正则表达式语法是通用的！
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//静态注册表单提交事件
function register() {
//先得到输入的用户名和密码
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
//判断是否为空""
if ("" == username.value || "" == pwd.value) {
alert("用户名和密码不能为空, 不能提交");
return false;//不提交
}
//表示要提交
return true;
}
//动态注册表单提交事件
window.onload = function () {
//使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致
//得到 from2 表单dom对象
var form2 = document.getElementById("form2");
// //给form2绑定onsubmit事件
// 解释 onsubmit 直接绑定的函数，会直接将结果(false/true)直接返回给onsubmit
form2.onsubmit = function () {
if(form2.username.value == "" || form2.pwd.value == "") {
alert("用户名和密码不能为空, 不能提交");
return false;//不提交
}
return true;
}
}
</script>
</head>
<body>
<h1>注册用户1</h1> <!-- 静态注册表单提交事件 -->
<form action="ok.html" onsubmit="return register()">
u: <input type="text" id="username" name="username"/><br/>
p: <input type="password" id="pwd" name="pwd"/><br/>
<input type="submit" value="注册用户"/>
</form>
<h1>注册用户2</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
u: <input type="text" name="username"/><br/>
p: <input type="password" name="pwd"/><br/>
<input type="submit" value="注册用户"/></form>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//动态绑定表单提交
window.onload = function () {
//1. 得到form2的dom对象
var form2 = document.getElementById("form2");
//2. 绑定onsubmit事件
form2.onsubmit = function () {
//3. 获取username输出
//老韩的过关斩将, 一个一个的条件验证，通过就继续，不通过就return false
//考虑正常情况，返回取反!!, 编程思想，写代码的思路
if(!(form2.username.value.length >= 4 && form2.username.value.length <= 6)) {
alert("用户名长度(4-6) 不满足");
return false;
}
//4. 处理密码合理性, 灵活
if(form2.pwd.value.length != 6) {
alert("密码长度(6) 不满足");
return false;
}
//5. 判断两次密码相等
if(form2.pwd.value != form2.pwd2.value) {
alert("你输入的两次密码不等");
return false;
}
//6 电子邮件..=> 需要使用正则表达式技术[在java基础中，老韩讲过 877讲]
//主要给大家说如何使用正则表达式
//String regStr = "^[\\w-]+@([a-zA-Z]+\\.)+[a-zA-Z]+$";
//解读
//1. 在java中，转义符是\\, 在js中使用正则表达式 \
//2. emailPattern.test("xxx"), 验证"xxx"是不是满足emailPattern规则
// 如果满足返回true, 否则返回false
var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
if(!emailPattern.test(form2.email.value)) {
alert("电子邮件格式不正确");
return false;
}
return true;
}
}
</script>
</head>
<body>
<h1>注册用户</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
用户名: <input type="text" name="username"/>长度(4-6)<br/>
密 码: <input type="password" name="pwd"/>长度(6)<br/>
确 认: <input type="password" name="pwd2">长度(6)<br/>
电 邮: <input type="text" name="email">满足基本格式<br/>
<input type="submit" value="注册用户"/></form>
</body>
</html>