本文详细介绍了HTMLDOM事件的使用，包括点击、页面加载、图像加载、鼠标悬停等常见事件。通过实例展示了如何在JavaScript中响应这些事件，如改变元素内容、分配事件处理函数、处理cookie和输入验证。此外，还提供了全选、反选复选框的实现，下拉列表的左右选择操作，以及省市联动下拉菜单的实现。这些实例深入浅出地展示了JavaScript在网页交互中的应用。
HTML DOM 事件
一、对事件作出反应
-
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
-
可以在事件发生时执行JavaScript，比如当用户在 HTML 元素上点击时。
-
如需在用户点击某个元素时执行代码，需要向一个 HTML 事件属性添加 JavaScript 代码
onclick=JavaScript -
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
-
在本例中，当用户在
<h1>元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
运行结果：
点击 “点击文本!” 后：
使用到的函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
二、使用 HTML DOM 来分配事件
- 向 button 元素分配 onclick 事件，
- 名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素，
- 按钮点击时Javascript函数将会被执行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">这里是按钮</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
运行结果：
点击 “这里是按钮” 后：
三、(1)onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
- onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
- onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>~弹窗-提示浏览器 cookie 是否可用~</p>
</body>
</html>
运行结果：
三、(2)onchange 事件
- onchange 事件常结合对输入字段的验证来使用。
- 下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用
upperCase()函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>~当你离开输入框后，函数将被触发，将小写字母转为大写字母~</p>
</body>
</html>
运行结果：
输入名字：
离开输入框后：
三、(3)onmouseover 和 onmouseout 事件
- onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:42px;">Mouse Over Me!</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You!"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
运行结果：
当鼠标移动至红色区域：
实例
案例一、列表全选练习：
-
使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中 -
创建一个页面
-
复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作 全选和选不选，也有一个事件 -
三个按钮，分别有事件
- 全选
- 全不选
- 反选-
全选操作
1、获取要操作的复选框 - 使用`getElementsByName()` 2、返回是数组， - 属性 checked判断复选框是否选中 `checked = true; //`表示选中 `checked = false;//`表示不选中 - 遍历数组，得到的是每一个checkbox * 把每一个checkbox属性`checked=true` -
全不选操作
1、获取到要操作的复选框 2、返回的是数组，遍历数组 3、得到每一个复选框 4、设置复选框的属性 checked=false -
反选操作
1、获取到要操作的复选框 2、返回数组，遍历数组 3、得到每一个复选框 4、判断当前的复选框是选中还是不选中 - if(love1.checked == true) {} 5、如果选中，属性checked设置成false，否则，设置成true -
使用复选框实现全选和全不选
1、得到上面那个复选框 - 通过id获取到 2、判断这个复选框是否是选中 - if条件，checked==true 3、如果是选中，下面是全选 4、如果不是选中，下面是全不选
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #000;
width: 400px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("personid");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("personid");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
<tr>
<td><input type="checkbox" name="personid" /></td>
<td>张三</td>
<td>20</td>
<td>15033444455</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>李四</td>
<td>30</td>
<td>15033444456</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>王五</td>
<td>40</td>
<td>15033444457</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>赵六</td>
<td>50</td>
<td>15033444458</td>
</tr>
</table>
<input type="button" value="反选" onclick="reverse()"/>
</body>
</html>
运行结果：
点击 “全选” 后：
案例二、下拉列表左右选择：
- 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮，有事件
* 选中添加到右边
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
* 全部添加到右边
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
* 选中添加到左边
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
* 全部添加到左边
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.center{
float:left;
margin-left: 100px ;
}
</style>
</head>
<body>
<div class="center">
<select id="select1" multiple style="width:100px;height: 200px;" ondblclick="sel()">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
</select>
<input type="button" onclick="sel()" value="将左边选中的选项添加到右边" />
</div>
<div class="center">
<select id="select2" multiple style="width:100px;height: 200px;" ondblclick="cancel_sel()">
</select>
<input type="button" onclick="cancel_sel()" value="将右边选中的选项添加到左边" />
</div>
</body>
<script type="text/javascript">
function sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select1_options = select1.getElementsByTagName("option");
for(var i = 0; i < select1_options.length; i++){
var opt = select1_options[i];
if(opt.selected){
select2.appendChild(opt);
}
}
}
//取消选中
function cancel_sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select2_options = select2.getElementsByTagName("option");
for(var i = 0; i < select2_options.length; i++){
var opt = select2_options[i];
if(opt.selected){
select1.appendChild(opt);
}
}
}
</script>
</html>
运行结果：
选中 “选项1” ，点击 “将左边选中的选项添加到右边” ：
案例三、省市联动：
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
由于每次都要向city里面添加option
第二次添加，会追加。
* 每次添加之前，判断一下city里面是否有option，如果有，删除
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" onchange="selectShi()">
<option value="">请选择省份</option>
<option value="0">河北省</option>
<option value="1">山东省</option>
<option value="2">河南省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["秦皇岛","保定","石家庄","唐山"];
arrs[1] = ["济南","临沂","青岛","威海"];
arrs[2] = ["洛阳","郑州","开封","周口"];
arrs[3] = ["太原","大同","运城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
//清空原来的信息
//获取市的option属性
var shi_opts = shi.getElementsByTagName("option");
//遍历删除市中的option
for(var i= shi_opts.length - 1; i >= 1; i--){
var shi_opt = shi_opts[i];
shi.removeChild(shi_opt);
}
for(var i = 0; i < shis.length; i++){
var textNode = document.createTextNode(shis[i]);
var opt = document.createElement("option");
opt.appendChild(textNode);
shi.appendChild(opt);
}
}
</script>
</html>
运行结果：
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" onchange="selectShi()">
<option value="">请选择省份</option>
<option value="0">河北省</option>
<option value="1">山东省</option>
<option value="2">河南省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["秦皇岛","保定","石家庄","唐山"];
arrs[1] = ["济南","临沂","青岛","威海"];
arrs[2] = ["洛阳","郑州","开封","周口"];
arrs[3] = ["太原","大同","运城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
var str = "<option value=''>请选择市</option>";
for(var i = 0; i < shis.length; i++){
str += "<option value=''>"+ shis[i] +"</option>";
}
shi.innerHTML = str;
}
</script>
</html>
运行结果：
扫一扫
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
