WebAPI基础(二)知识点
- 事件三要素
- 事件源
- 事件类型
- 事件处理函数
当 < > 被 < > 的时候,效果是 < >
语法:事件源.on事件类型 = 事件处理函数
- 修改样式
- style 行内样式
- className 类名
- 事件类型
- 单击 click
- 双击 dblclick
- 鼠标移入 mouseover / mouseenter
- 鼠标移出 mouseout / mouseleave
- 获取焦点 focus
- 失去焦点 blur
- 案例
- 开关思想 - 假设法
- tab 栏切换
- 电商搜索框
查找(获取)元素
所有<元素>在 JavaScript 中都是<对象>的形式:
通过id名称获取元素
document.getElementById('id名称');
查找成功:
返回元素
查找失败:
返回 null
通过标签名称获取元素
document.getElementsByTagName('标签名称');
查找成功:
返回 伪数组集合,里面包含 元素节点,可循环遍历
查找失败:
返回空的 伪数组
通过类名称获取元素
document.getElementsByClassName('类名称');
查找成功:
返回 伪数组集合,里面包含 元素节点,可循环遍历
查找失败:
返回空的 伪数组
开关思想
一个元素绑定一个事件,可以实现两个效果的来回切换。
效果需求:点击灯泡,切换 点亮 和 熄灭。
<!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 模糊,失去焦点 |
事件应用
搜索框 - 获取焦点失去焦点
下拉菜单 - 鼠标移入移出
Tab 栏切换 - 鼠标移入或点击
其他整理
调试查找元素
无 bug 情况
有 bug 情况
错误情况1
Cannot set property '***' of null/undefined
// 翻译:不能给 null 设置 *** 属性
// 解决办法:一般是查找元素的时候查找失败,检查 id名/类名/标签名 是否写错。
错误情况2
*** is not a function
// 翻译:*** 不是一个函数
// 解决办法:函数名称书写错误,检查函数名的单词是否写错。
错误情况3
报错情况4