文章目录
# 前言
这部分学习DOM的一些基本事件。
一、事件
绑定事件的三要素：
（1）事件源，给谁绑定事件
（2）事件类型，绑定什么类型的事件（click单击事件）
（3）事件函数，事件发生后执行什么内容，写在函数内部
常用事件监听方法：
（1）绑定HTML元素属性
（2）绑定DOM对象属性
<!-- html元素内部属性 -->
<!-- <input type="button" value="点我有惊喜" onclick="alert('恭喜你，中奖了')"> -->
<input type="button" value="点我有惊喜" id="btn">
<script>
//DOM对象内部属性
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("很遗憾，你没有中奖");
}
</script>
常见的鼠标事件
二、非表单元素属性操作
1.非表单元素
调用方式:元素对象打点调用属性名，例如obj.href。（例如:href、title、id、src等。）
注意:部分的属性名跟关键字和保留字冲突，会更换写法。
class → className
for → htmlFor
rowspan→rowSpan
<a href="https://www.baidu.com/" id="link" title="跳转到百度页面">跳转</a>
<img src="images/a.jpg" alt="美女" class="pic" id="pic">
<script>
//获取元素
var link = document.getElementById("link");
var pic = document.getElementById("pic");
//调用元素中的属性，从而操作HTML中的标签属性
console.log(link.id);//只可以读，不可以更改
console.log(link.title);
console.log(link.href);
console.log(pic.className);
console.log(pic.alt);
//切换图片
pic.src= "images/b.jpg";
</script>
案例1：点击按钮切换图片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击" id="btn"><br>
<img src="images/a.jpg" id="pic">
<script>
//获取元素
var btn = document.getElementById("btn");
var pic = document.getElementById("pic");
//定义一个变量，如果值为1代表此时是a图片，如果是2代表是b图片
var a_b = 1;
//点击切换图片事件
btn.onclick = function () {
if (a_b == 1) {
pic.src = "images/b.jpg";
a_b = 2;
} else {
pic.src = "images/a.jpg";
a_b = 1;
}
};
</script>
</body>
</html>
案例2：点击按钮显示隐藏元素案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击隐藏">
<div id="box"></div>
<script>
//获取元素
var btn = document.getElementById("btn");
var box = document.getElementById("box");
//点击切换隐藏显示事件
btn.onclick = function () {
//判断当前是显示还是隐藏
if (btn.value == "点击隐藏") {
box.className = "hide";
btn.value = "点击显示";
} else {
box.className = "show";
btn.value = "点击隐藏";
}
}
</script>
</body>
</html>
2.事件函数的内部this
在事件函数内部有一个this，指向事件源。
不同函数内部this的指向：
（1）普通函数：window对象
（2）构造函数：生成的实例对象
（3）对象的方法：指的是对象的本身
（4）事件函数：指向事件源
案例3：美女画廊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>美女画廊</h2>
<div id="imagesgallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px">
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px">
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px">
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px">
</a>
</div>
<div style="clear: both;"></div>
<img src="images/placeholder.png" id="image" width="450px">
<p id="des">选择一个图片</p>
<script>
//获取元素
var imagesgallery = document.getElementById("imagesgallery");
var link = imagesgallery.getElementsByTagName("a");
var image = document.getElementById("image");
var des = document.getElementById("des");
//遍历数组添加点击事件
for (var i = 0;i < link.length;i++) {
link[i].onclick = function () {
//更改image内部src属性值切换图片
image.src = this.href;
//更改des内的文字内容
des.innerText = this.title;
//取消a标签的跳转效果
return false;
};
}
</script>
</body>
</html>
3.获取标签内部内容的属性
innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。
可以通过两个属性给双标签内部去更改内容:
innerHTML 设置属性值，有标签的字符串，会按照HTML 语法中的标签加载。innerText设置属性值，有标签的字符串，会按照普通的字符加载。
innerText:在设置纯字符串时使用。
innerHTML:在设置有内部子标签结构时使用。
<div id="box">
这是一个div标签
<span>这是一个sapn标签</span>
</div>
<script>
//获取元素
var div = document.getElementById("box");
//调用标签内部内容
console.log(box.innerHTML);
console.log(box.innerText);
//设置标签内容
div.innerText = "<h2>js 学习js </h2>";
// div.innerHTML = "<h2>js 学习js </h2>";
</script>
三、表单元素属性
1.表单元素
注意:在DOM 中元素对象的属性值只有一个时，会被转成布尔值显示。例如:txt. disabled = true ;
<input type="button" value="按钮" id="btn"><br>
<input type="text" id="txt" disabled="disabled">
<select id="list">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<script>
// 获取元素
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var list = document.getElementById("list");
var opts = list.getElementsByTagName("option");
//调用value
console.log(btn.value);
console.log(txt.value);
console.log(opts[0].value);
console.log(opts[0].innerHTML);
//设置value
btn.value = "点击";
txt.value = "请选择地址";
//表单元素特有的一些属性
console.log(txt.disabled);
btn.disabled = "true";
</script>
案例1：检测用户名和密码案例
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" id="name"><br>
<input type="text" id="pw"><br>
<input type="button" id="btn" value="提交">
<script>
//检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
//获取元素
var btn = document.getElementById("btn");
var username = document.getElementById("name");
var pw = document.getElementById("pw");
//添加点击事件，如果用户名或密码输入错误就高亮显示
btn.onclick = function () {
//判断用户名
if (username.value.length < 3 || username.value.length > 6) {
username.className = "bg";
return;
} else {
username.className = "";
}
//判断密码
if (pw.value.length < 6 || pw.value.length > 8) {
pw.className = "bg";
return;
} else {
pw.className = "";
}
console.log("数据已经提交");
};
</script>
</body>
</html>
案例2：随机设置下拉菜单中的选中项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="选择" id="btn">
<br>
<select id="food">
<option>烤肉</option>
<option>拉面</option>
<option>麻辣烫</option>
<option>小龙虾</option>
<option>火锅</option>
<option>外卖</option>
</select>
<script>
//获取元素
var btn = document.getElementById("btn");
var food = document.getElementById("food");
var opts = food.getElementsByTagName("option");
//给按钮添加点击事件
btn.onclick = function () {
//获取到opts数组的随机下标n
var n = Math.floor(Math.random() * opts.length);
//将得到的数组下标的那个选项进行选中
opts[n].selected = true;
}
</script>
</body>
</html>
案例3：搜索文本框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.gray {
color: gray;
}
.black {
color: black;
}
</style>
</head>
<body>
<input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
<input type="button" value="搜索" id="btnSearch">
<script>
//获取元素
var txtSearch = document.getElementById("txtSearch");
//添加焦点事件
txtSearch.onfocus = function () {
if (this.value === "请输入搜索关键字") {
this.value = "";
this.className = "black";
}
};
//添加失去焦点事件
txtSearch.onblur = function () {
if (this.value == "请输入搜索关键字" || this.value == "") {
this.value = "请输入搜索关键字";
this.className = "gray";
}
};
</script>
</body>
</html>
案例4：反选和全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="all" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
//获取元素
var all = document.getElementById("all");
var tb = document.getElementById("tb");
var tb_inputs = tb.getElementsByTagName("input");
var btn = document.getElementById("btn");
//1.添加全选点击事件
all.onclick = function () {
for (var i = 0;i < tb_inputs.length;i++) {
tb_inputs[i].checked = this.checked;
}
};
//2.单独选择子项过程
for (var i = 0;i < tb_inputs.length;i++) {
//给每一个子选项添加点击事件
tb_inputs[i].onclick = function () {
//调用函数
allChecked();
};
}
//反选
btn.onclick = function () {
for (var i = 0;i < tb_inputs.length;i++) {
tb_inputs[i].checked = !tb_inputs[i].checked;
}
//调用函数
allChecked();
};
//判断All是否被选中的函数
function allChecked() {
//定义一个变量用来表示判断是否全选 默认是true是全选
var isAllChecked = true;
for (var j = 0;j < tb_inputs.length;j++) {
//如果有一个是没选中的，就让变量变为false
if (tb_inputs[j].checked == false) {
isAllChecked = false;
//走到这里说明肯定不是全选，不需要再往下执行
break;
}
}
all.checked = isAllChecked;
}
</script>
</body>
</html>
四、自定义属性操作
1.自定义属性
getAttribute(name）获取标签行内属性
setAttribute(name,value)设置标签行内属性
removeAttribute(name)移除标签行内属性
<div id="box" age="22" sex="male">小明</div>
<script>
var box = document.getElementById("box");
//只能调用自有属性
console.log(box.id);
//调用自定义属性和自有属性的方法
console.log(box.getAttribute("age"));
//更改自定义属性值，或者添加新的自定义属性
console.log(box.setAttribute("age","20"));
console.log(box.setAttribute("city","haerbin"));
//删除自定义属性
console.log(box.removeAttribute("sex"));
</script>
五、style样式属性操作
1.style样式属性
使用style属性方式设置的样式显示在标签行内。
element.style属性的值，是所有行内样式组成的一个样式对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg{
background-color: pink;
}
</style>
<script src="common.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box" style="width: 100px" class="bg">文字</div>
<script>
//调用函数获取元素
var btn =my$("btn");
var box =my$("box");
//两种方式更改样式
//1.通过更改类名的方式更改样式 className
//2.通过对象的style属性去操作样式(只能获取行内的样式)
// console.log(btn);
console.log(box.style);
console.log(box.style.width);
//更改样式内容
box.style.width = "200px";
//如果使用的是复合单一属性，那么需要驼峰命名，省略-
console.log(box.style.backgroundColor);
</script>
</body>
</html>
样式对象可以继续点语法调用或更改css 的行内样式属性，例如width、height等属性。
注意1:类似background-color这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写backgroundColor。
注意2:通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px等单位。
2.样式属性操作选择
如果是一条或很少的样式需要更改，那么就用style方法，如果需要的更改的样式很多，那么使用className更加方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cls {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="common.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box">文字</div>
<script>
// 问题：实际工作中我们应该选择哪种方法？
// 获取元素
var btn = my$("btn");
var box = my$("box");
//添加点击按钮有背景颜色的点击事件
btn.onclick = function () {
//1.className
// box.className = "cls";
//2.style
box.style.width = "100px";
box.style.height = "200px";
box.style.backgroundColor = "pink";
};
</script>
</body>
</html>
案例1：开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="common.js"></script>
</head>
<body>
<input type="button" id="btn" value="开灯">
<script>
//调用获取元素
var btn = my$("btn");
//添加点击按钮开关灯事件
btn.onclick = function () {
if (this.value === "开灯") {
document.body.style.backgroundColor = "black";
this.value = "关灯";
} else {
document.body.style.backgroundColor = "white";
this.value = "开灯";
}
};
</script>
</body>
</html>
案例2：显示隐藏二维码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.box a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
//获取元素
var box = my$("box");
var er = my$("er");
//添加鼠标移上事件
box.onmouseover = function () {
er.className = er.className.replace("hide","show");
};
//添加鼠标移开事件
box.onmouseout = function () {
er.className = er.className.replace("show","hide");
};
</script>
</body>
</html>
案例3：文本框高亮显示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<button id="btn">按钮</button>
<script>
//获取元素
var txts = document.getElementsByTagName("input");
//给每个input添加焦点事件
for (var i = 0;i < txts.length;i++) {
txts[i].onfocus = function () {
//排他思想：排除所有的
for (var j = 0;j < txts.length;j++) {
txts[j].style.backgroundColor = "";
}
//改变自己
this.style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>
案例4：设置元素大小和位置案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.new {
position: absolute;
left: 200px;
top: 200px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script src="common.js"></script>
<script>
//获取元素
var btn = my$("btn");
var box = my$("box");
//添加点击事件
btn.onclick = function () {
//两种方法
//添加类名
box.className = "new";
//通过style属性值方法
// box.style.width = "200px";
// box.style.height = "200px";
// box.style.top = "200px";
// box.style.left= "200px";
// box.style.position = "absolute";
}
</script>
</body>
</html>
案例5：表格隔行变色和高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
//获取所有行的tr
var trs = document.getElementsByTagName("tr");
//隔行变色
for (var i = 0;i < trs.length;i++) {
//判断如果是偶数行为粉色，奇数行为灰色
if (i % 2 == 0) {
trs[i].style.backgroundColor = "pink";
} else {
trs[i].style.backgroundColor = "lightgray";
}
//定义一个变量用录默认的颜色
var bgc;
//鼠标移上高亮显示
trs[i].onmouseover = function () {
bgc = this.style.backgroundColor;
this.style.backgroundColor = "skyblue";
};
//鼠标离开恢复默认
trs[i].onmouseout = function () {
this.style.backgroundColor = bgc;
};
}
</script>
</body>
</html>
案例5：tab选项卡切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin:0; padding: 0;}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display:inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: skyblue;
}
.bd div {
height: 255px;
background-color: skyblue;
display: none;
}
.bd div.current {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="hd" id="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd" id="bd">
<div class="current">我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取元素
var hd = my$("hd");
var spans = hd.getElementsByTagName("span");
var bd = my$("bd");
var divs = bd.getElementsByTagName("div");
//给每个选项添加鼠标移上事件
for (var i = 0;i < spans.length;i++) {
spans[i].index = i;
spans[i].onmouseover = function () {
//排他思想
for (var j = 0;j < spans.length;j++) {
//排除所有，将所有的span都设置为粉色
spans[j].className = "";
divs[j].className = "";
}
//设置自己
this.className = "current";
divs[this.index].className = "current";
};
}
</script>
</body>
</html>
总结
这部分学习了DOM事件的相关学习，表单属性的操作，非表单元素的操作，自定义属性的操作，style样式的操作。
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
