1.6.4 案例 1.6.4.1 需求说明 接下来我们通过案例来加强所学js知识点的掌握。
需求如下3个：
点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。
效果如图所示：
1.6.4.2 资料准备 在VS Code中创建名为11. JS-事件-案例.html的文件，提前准备如下代码：
JS-事件-案例
电影 旅游 游戏
浏览器打开如图所示：
1.6.4.3 需求1需求：
点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
分析：
点击按钮的时候触发，所以我们需要绑定单击事件。不管是点亮还是熄灭，都是图片的变化，所以我们需要修改图片。但是修改图片我们还需要先获取标签图片标签对象。
步骤：
首先给点亮按钮和熄灭按钮都绑定单击事件。分别绑定函数on()和off（）
然后在js中定义on()和off()函数
on()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换点亮的图片
off()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换熄灭的图片
代码实现：
事件绑定
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction 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()函数来进行大写转换
代码实现：、
事件绑定：
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction 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即可
代码实现：
事件绑定：
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ;function checkAll(){ //a. 获取所有复选框元素对象 var hobbys = document.getElementsByName("hobby"); //b. 设置选中状态 for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked = true; } }
function reverse(){//a. 获取所有复选框元素对象 var hobbys = document.getElementsByName("hobby"); //b. 设置未选中状态 for (let i = 0; i < hobbys.length; i++) { const element = hobbys[i]; element.checked = false; } }
1.6.4.6 完整代码JS-事件-案例
<br> <br>
<input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
<br> <br>电影 旅游 游戏
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_69748833/article/details/134410456
