Javaweb之javascript事件案例的详细解析_点击 “点亮”按钮点亮灯泡,点击“熄灭”按钮熄灭灯泡; (2)输入框鼠标聚焦后,展

作者：Guff_9hys | 2024-07-10 05:32:58

踩

点击 “点亮”按钮点亮灯泡,点击“熄灭”按钮熄灭灯泡; (2)输入框鼠标聚焦后,展

1.6.4 案例

1.6.4.1 需求说明

接下来我们通过案例来加强所学js知识点的掌握。

需求如下3个：

点击 “点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡
输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。

效果如图所示：

1.6.4.2 资料准备

在VS Code中创建名为11. JS-事件-案例.html的文件，提前准备如下代码：


<!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>JS-事件-案例</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" > 
    <input type="button"  value="熄灭" >
    <br> <br>
    <input type="text" id="name" value="ITCAST" >
    <br> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <input type="button" value="全选" > 
    <input type="button" value="反选" >
</body>
</html>

浏览器打开如图所示：

1.6.4.3 需求1

需求：

点击 “点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡
分析：

点击按钮的时候触发，所以我们需要绑定单击事件。不管是点亮还是熄灭，都是图片的变化，所以我们需要修改图片。但是修改图片我们还需要先获取标签图片标签对象。
步骤：
- 首先给点亮按钮和熄灭按钮都绑定单击事件。分别绑定函数on()和off（）
- 然后在js中定义on()和off()函数
- on()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换点亮的图片
- off()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换熄灭的图片

代码实现：

事件绑定


<input type="button" value="点亮" onclick="on()"> 
<input type="button"  value="熄灭" onclick="off()">

on()和off()函数


//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
function on(){
    //a. 获取img元素对象
    var img = document.getElementById("light");
    //b. 设置src属性
    img.src = "img/on.gif";
}
function off(){
    //a. 获取img元素对象
    var img = document.getElementById("light");
    //b. 设置src属性
    img.src = "img/off.gif";
}

1.6.4.4 需求2

需求：

输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
分析：

聚焦和失焦的时候完成功能，所以我们需要给input标签绑定onfocus和onblur事件；我们要切换大小写，那么我们可定要获取原本输入框的内容，通过查询资料，需要使用input标签对象的value属性，然后进行大小写切换；切换完成我们需要重新填入，所以还是通过value属性来设置input标签输入框的内容
步骤:
- 给input标签的onfocus和onblur事件分别绑定lower()和upper()函数
- 然后在js中定义lower()和upper()函数
- 对于lower()函数，先通过id获取输入框对象，然后通过输入框的value属性来设置内容，内容的话可以通过字符串的toLowerCase()函数来进行小写转换
- 对于upper()函数，先通过id获取输入框对象，然后通过输入框的value属性来设置内容，内容的话可以通过字符串的toupperCase()函数来进行大写转换

代码实现：、

事件绑定：

<input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">

lower()和upper()函数


//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower(){//小写
    //a. 获取输入框元素对象
    var input = document.getElementById("name");
    //b. 将值转为小写
    input.value = input.value.toLowerCase();
}
function upper(){//大写
    //a. 获取输入框元素对象
    var input = document.getElementById("name");
    //b. 将值转为大写
    input.value = input.value.toUpperCase();
}

1.6.4.5 需求3

需求：

点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。
分析：

点击按钮完成功能，所以我们需要给2个按钮绑定单击事件；我们需要设置所有复选框的状态，通过我们之前的案例，我们知道，我们需要获取所有的复选框，然后遍历，可以通过设置checked属性为true，来设置复选框为选中；那么反之，设置checked属性为false，来设置复选框为未选中。
步骤：
- 给全选和反选按钮绑定单击事件，分别绑定函数checkAll()和reverse()
- 在js中定义checkAll()和reverse()函数
- 对于checkAll()函数，首先通过name属性值为hobby来获取所有的复选框，然后遍历复选框，设置每个复选框的checked属性为true即可
- 对于reverse()函数，首先通过name属性值为hobby来获取所有的复选框，然后遍历复选框，设置每个复选框的checked属性为false即可