WebAPI基础（二）

WebAPI基础（二）知识点

事件三要素
1. 事件源
2. 事件类型
3. 事件处理函数

当 < > 被 < > 的时候，效果是 < >

语法：事件源.on事件类型 = 事件处理函数

修改样式
1. style 行内样式
2. className 类名
事件类型
1. 单击 click
2. 双击 dblclick
3. 鼠标移入 mouseover / mouseenter
4. 鼠标移出 mouseout / mouseleave
5. 获取焦点 focus
6. 失去焦点 blur
案例
1. 开关思想 - 假设法
2. tab 栏切换
3. 电商搜索框

查找(获取)元素

所有<元素>在 JavaScript 中都是<对象>的形式：

通过id名称获取元素

document.getElementById('id名称');

查找成功：
返回元素
查找失败：
返回 null

通过标签名称获取元素

document.getElementsByTagName('标签名称');

查找成功：
返回伪数组集合，里面包含元素节点，可循环遍历
查找失败：
返回空的伪数组

通过类名称获取元素

document.getElementsByClassName('类名称');

查找成功：
返回伪数组集合，里面包含元素节点，可循环遍历
查找失败：
返回空的伪数组

扫描二维码关注公众号，回复： 5083196 查看本文章

开关思想

一个元素绑定一个事件，可以实现两个效果的来回切换。

效果需求：点击灯泡，切换点亮和熄灭。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开关思想</title>
<style>
img {
cursor: pointer;
}
.box {
padding: 50px;
}
</style>
</head>
<body>
<div class="box">
<img alt="灯泡" id="light" src="off.gif">
</div>
</body>
</html>
<script>
/* 查找元素 */
var light = document.getElementById('light');
/* 添加点击事件 */
light.onclick = function () {
/* 如果是路径属性，如 src,href，JS 会自动处理成绝对路径，不能直接用于判断 */
console.log(light.src);
/* 用 indexOf 查找是否包含 off.gif */
if (light.src.indexOf('off.gif') >= 0) {
/* 如果包含 off.gif，修改成 on.gif 开灯 */
light.src = 'on.gif';
} else {
/* 其他情况修改回 off.gif */
light.src = 'off.gif';
}
}

</script>

开关思路 - 假设法

要想熟练运用假设法，一定要到控制台调试，监听事件触发时 flag 值的变化。

假设法主要分3步：

立 flag - 创建 flag 变量，并设置初始值。
改 flag - 在某个情况下，改变 flag 的值
用 flag - 一般 flag 值用于 if 判断

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开关思想</title>
<style>
img {
cursor: pointer;
}
.box {
padding: 50px;
}
</style>
</head>
<body>
<div class="box">
<img alt="灯泡.." id="light" src="off.gif">
</div>
</body>
</html>
<script>
/* 查找元素 */
var light = document.getElementById('light');
/* 1. 立 flag - 创建 flag 变量，并设置初始值 */
var flag = false;
/* 绑定事件 */
light.onclick = function () {
/* 2. 改 flag，修改 flag 的值，每次点击取反 */
flag = !flag; // 第一次点击，值会变成 true

/* 3. 用 flag，一般用于做判断，判断注意第一次的值是什么 */
if (flag) {
/* 如果 flag 为真，满足条件换成 on.gif */
light.src = 'on.gif';
} else {
/* 如果 flag 为假，换成 off.gif */
light.src = 'off.gif';
}
}
</script>

事件类型

事件类型	单词	备注
鼠标单击	click
鼠标双击	dblclick	double 双倍

鼠标移入	mouseover	mouse 鼠标
鼠标移出	mouseout

获取焦点	focus	focus 焦点
失去焦点	blur	blur 模糊，失去焦点