本文介绍了JavaScript中事件处理机制，包括事件的概念、HTML预定义事件、事件绑定方式，以及如何利用innerHTML属性进行元素操作。此外，通过四个实战案例：表单校验、隔行换色、全选与反选、省市联动，展示了事件与DOM操作的应用，涉及数组、this关键字、DOM对象等技术。
1 案例1-表单校验
1.1 需求介绍
当用户离开输入框的时候,对用户在输入框中输入的内容进行校验,如果信息合法,则不进行任何提示,如果信息不合法,则在输入框后面以红色的字体提示即可;
1.2 技术分析
1: 当用户离开输入框的时候,我们希望获取输入框的值并进行校验;需要使用事件完成;
2: 如果检验不合法,希望在输入框后面用红色的字体提示,需要使用js的innerHTML属性完成;
1.3 Js中的事件
1.3.1 什么是事件?
当用户在浏览器页面上,触发一些条件的时候,我们可以使用代码对触发的行为作出相应的处理方案,这个过程,就是事件处理机制;
1.3.2 在html中有哪些预定义的事件?(重点)
在html中的常用的事件分为3类:
1:页面加载事件
onload
2:鼠标相关的事件
点击事件: onclick
鼠标移入: onmouseover
鼠标移出: onmouseout
3:表单相关事件
当表单提交的时候 onsubmit
失去焦点事件 onblur
获取焦点 onfocus
下拉框变化 onchange
1.3.3 事件的绑定方式(重点)
一共有两种:
1:使用html标签的事件属性:
格式:
<html的标签名 事件名 = "方法名()">
2:使用js代码,给标签对象派发事件:
格式:
标签对象.事件名 = function(){
}
注意：
事件的绑定和事件的触发是两个时机，事件的绑定与事件的触发一定要区分开!!!!
只有onload特殊，前面不用有标签对象可以直接用，其他的都不行。
在使用js的方式时，页面加载事件只能使用一次。
1.4 Js的方式操作标签的元素体(重要)-innerHTML
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
innerHTML属性可以使用任意一个html的标签对象直接调用;
格式:
取元素体：var 结果值=标签对象.innerHTML;
修改元素体：标签对象.innerHTML="新的元素体";
扩展:(不常用,了解)
与innerHTML有一个相似的属性,是innerText,区别在于:
innerText只能操作纯文本文字,如果包含标签,会不识别标签,直接原样输出;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 当页面加载完成之后,获取d1的元素体并打印出来
*/
onload=function(){
var v=document.getElementById("d1").innerHTML;
alert(v)
//将d1的元素体,修改为红色的你好
document.getElementById("d1").innerHTML='<font color="red">你好</font>';
}
</script>
</head>
<body>
<div id="d1">
这是d1的内容
</div>
</body>
</html>
1.5 表单校验的步骤
1：在form表单的基础上;
2：写一个页面加载事件,给所有的输入框绑定失去焦点的事件;
3：编写一个当失去焦点事件触发的时候,需要执行的事情;(获取输入框的值,并校验,根据校验的结果,决定在输入框的后面是否以文字提示);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function check(id,info){
//1:根据id的值获取标签对象
var inp=document.getElementById(id);
//2:根据标签对象,获取标签的value属性值
var v=inp.value;
//alert(v)
if(v==""){
//说明信息不合法,需要在对应的span中提示
var sp=document.getElementById(id+"_msg");
//操作sp的元素体
sp.innerHTML='<font color="red">'+info+'</font>';
}else{
var sp=document.getElementById(id+"_msg");
//操作sp的元素体
sp.innerHTML='';
}
}
</script>
<body>
<form action="#" method="get">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="40%"><input type="text" name="username" id="username" onblur="check('username','用户名不能为空')"></td>
<td width="40%"><span id="username_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password" onblur="check('password','密码不能为空')"></td>
<td><span id="password_msg"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword" onblur="check('repassword','确认密码不能为空')"></td>
<td><span id="repassword_msg"></span></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email" onblur="check('email','邮箱不能为空')"></td>
<td><span id="email_msg"></span></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" id="name" onblur="check('name','真实姓名不能为空')"></td>
<td><span id="name_msg"></span></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="sex1" value="男"> 男
<input type="radio" name="sex" id="sex2" value="女" />女
<input type="radio" name="sex" id="sex3" value="" checked="checked"/>保密
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>2 案例2-隔行换色
2.1 需求分析
当页面加载后,对表格的奇数行和偶数行分别设置不同的背景色;当鼠标移入某一行的时候,背景色变为honse,当鼠标移出的时候,背景色变为原来的颜色;
2.2 技术分析
1:使用document对象的其他方法,一次性获取页面中的所有表格行对象;
2:使用js的数组保存多个行对象并操作数组中的每一个行对象即可;
3:根据索引可以判断当前行是奇数和偶数行问题,并设置背景色;
4:需要给每一行绑定鼠标移入和移出事件;事件中需要获取原来的颜色,并修改为红色,鼠标离开的时候,还原成原来的颜色;
2.3 关于获取更多html标签信息的方法
关于获取更多信息的方法:
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
2.4 Js的数组
Js的数组中,也有索引,也有length属性,用于代表长度;
数组定义格式:
常用的格式:(推荐的格式)
Var 数组名 = [元素值1,元素值2.....];
了解的格式:
Var 数组名 =new Array();
Var 数组名 =new Array(长度);
Var 数组名 =new Array(元素值1,元素值2.....);
Js数组与java中不一样的地方:
1:在js中,数组可以存任意数据类型;（同一个数组里可存不同类型数据）
2:在js中,数组永远不会出现索引越界异常,长度会自动改变到您使用的那个索引;
3:数组长度可变;
在js中的数组自带了一些方法,可以直接使用:(了解,不常用)
1:join方法 可以直接将数组转成字符串形式
2:concat方法 可以连接多个数字;
3sort方法 对数组排序;
2.5 js的this关键字
js中的this代表的是当前标签对象。(this写在了哪个标签中,代表的就是哪个标签对象);
通常用在事件中;
例如:
<script>
/*
* this 练习
*/
function show(t){
alert(t.innerHTML)
}
</script>
</head>
<body>
<div onclick="show(this)">
这是div的内容
</div>
<span onclick="show(this)">
这是span的内容
</span>
</body>
2.6 案例的步骤
1:当页面加载的时候,使用document对象的getElementsByTagName方法获取表格的所有行对象;(忽略第一行)
2:迭代数组对象,并根据索引判断奇数行和偶数行并设置背景色;
3:对每一行都绑定鼠标移入和移出事件;
在鼠标移入事件中:
需要获取原来的颜色保存起来,并修改当前行为红色,
在鼠标移出事件中:
修改当前行为原来的颜色;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
onload=function(){
var arr=document.getElementsByTagName("tr");
for(var i=1;i<arr.length;i++){
//获取当前行对象
var tr=arr[i];
//据索引判断奇数行和偶数行并设置背景色;
if(i%2==0){
tr.style.backgroundColor="blueviolet";
}else{
tr.style.backgroundColor="yellow";
}
//对每一行都绑定鼠标移入和移出事件;
tr.onmouseover=function(){
//需要获取原来的颜色保存起来,并修改当前行为红色,
y = this.style.backgroundColor;
this.style.backgroundColor="red";
}
tr.onmouseout=function(){
this.style.backgroundColor=y;
}
}
}
</script>
</head>
<body >
<table border="1px" width="100%">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</body>
</html>
3 案例3-全选与反选
3.1 需求介绍
当用户点击页面上的按钮的时候,分别选择相应的效果;
3.2 技术分析
1：当页面加载的时候,给3个按钮绑定点击事件;
2：3个事件分别做:
（1）全选 获取所有的多选框,将每一个多选框的checked属性修改为true即可
（2）全不选 获取所有的多选框,将每一个多选框的checked属性修改为false即可
（3）反选 获取所有的多选框,将每一个多选框的checked属性取反并设置回去;
3.3 案例代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
onload=function(){
//给全选按钮绑定事件
document.getElementById("quan").onclick=function(){
//获取所有的多选框,将每一个多选框的checked属性修改为true即可
var arr=document.getElementsByClassName("itemSelect");
//迭代数组
for(var i=0;i<arr.length;i++){
arr[i].checked=true;
}
}
//给全不选按钮绑定事件
document.getElementById("bu").onclick=function(){
//获取所有的多选框,将每一个多选框的checked属性修改为false即可
var arr=document.getElementsByClassName("itemSelect");
//迭代数组
for(var i=0;i<arr.length;i++){
arr[i].checked=false;
}
}
//给反选按钮绑定事件
document.getElementById("fan").onclick=function(){
//获取所有的多选框,将每一个多选框的checked属性修改为取反后的值即可
var arr=document.getElementsByClassName("itemSelect");
//迭代数组
for(var i=0;i<arr.length;i++){
arr[i].checked=!arr[i].checked;
}
}
}
</script>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" id="quan" value="全选" />
<input type="button" id ="bu" value="全不选" />
<input type="button" id="fan" value="反选" />
</th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
4 案例4-省市联动
4.1 需求
当用户选择相应的省份信息时,动态的修改对应的市区信息;
4.2 技术分析
1:当页面加载的时候,给第一个下拉框绑定一个onchange事件;
2:当onchange触发的时候,需要获取用户选择的省份编号,并根据编号获取对应的市区信息;
3:需要使用二维数组保存省份和市区的信息;
4:需要从省份中获取对应的市区信息,并将这些市区信息添加到第二个下拉框中;(操作元素体)
4.3 案例代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组,存储城市信息
var cities = new Array(4);
cities[0] = new Array("市辖区");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
onload=function(){
//给第一个下拉框绑定一个onchange事件;
document.getElementById("sheng").onchange=function(){
//立刻清除市区信息
document.getElementById("shi").innerHTML="<option>--请选择市---</option>";
//获取用户选择的省份编号值;
var v=document.getElementById("sheng").value;
//alert(v)
//根据编号获取对应的市区信息
var arr= cities[v];
//此时的arr中都是市区的名称
var op="<option>--请选择市---</option>";
for(var i=0;i<arr.length;i++){
//累加拼接下面的option标签
op+='<option>'+arr[i]+'</option>';
}
//将元素体存进行
document.getElementById("shi").innerHTML=op;
}
}
</script>
</head>
<body>
<select id="sheng">
<option>--请选择省份---</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="shi">
<option>--请选择市---</option>
</select>
</body>
</html>
5 Dom对象
5.1 Dom概述
Dom对象就是文档对象模型，代表的是整个文档对象，在dom中有一个节点概念；
Html中任意一个元素或文本或属性都可以看成是一个节点对象；
5.2 Dom的作用
使用dom对象,可以操作html文本中的任意内容;
Document 代表整个 HTML 文档，可被用来访问页面中的所有元素。
具体还有什么对象可以去查w3cschool。
5.3 DOM中的节点概述
5.4 DOM中的通用方法(了解)
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
需求：
使用dom的通用方法在一个div中,添加一个红色的字体;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
onload=function(){
/*
* 给div添加红色的你好
*
*/
//创建一个font标签对象
var f=document.createElement("font");
//设置属性
f.setAttribute("color","red");
//创建文本对象
var t=document.createTextNode("你好");
//给f对象,添加文本
f.appendChild(t);
//给div添加孩子
document.getElementById("d1").appendChild(f);
}
</script>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
5.5 全局函数
所谓的全局函数就是可以直接使用的方法;
| 分类 | 函数名 | 描述 |
| 转换 | parseFloat() | 解析一个字符串并返回一个浮点数。 |
| parseInt() | 解析一个字符串并返回一个整数。 | |
| 执行 | eval() | 计算 JavaScript 字符串，并把它作为脚本代码来执行。 |
| 编码 | encodeURI() | 把字符串编码为 URI。 |
| decodeURI() | 解码某个编码的 URI。 |
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
