JS事件监听案例

一、通过事件监听及DOM操作，完成如下效果实现。
1、点击“点亮”按钮 点亮 灯泡 ，点击“熄灭”按钮 熄灭灯泡。
2、输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
3、点击“全选”按钮，使得所有的复选框呈现被选中的状态，点击“反选”按钮，使得所有的复选框呈现取消勾选的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="D:/APPdata/VSCodeData/Picture/off电灯泡.jpg" ><br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br><br>
    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
    <script>
    //1、点击“点亮”按钮 点亮 灯泡 ，点击“熄灭”按钮 熄灭灯泡。--onclick
    function on(){
        //获取img元素对象
        let img = document.getElementById("light");
        //设置src属性
        img.src = "D:/APPdata/VSCodeData/Picture/on电灯泡.jpg"
    }
     function off(){
        //获取img元素对象
        let img = document.getElementById("light");
        //设置src属性
        img.src = "D:/APPdata/VSCodeData/Picture/off电灯泡.jpg"
    }
    // 2、输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。--onfocus,onblur
    function lower(){//小写
        //获取输入框元素对象
       let input = document.getElementById("name");
        //将值转为小写
        input.value = input.value.toLowerCase();
    }
    function upper(){//大写
        // 获取输入框元素对象
       let input = document.getElementById("name");
        //将值转为大写
        input.value = input.value.toUpperCase();
    }
    // 3、点击“全选”按钮，使得所有的复选框呈现被选中的状态，点击“反选”按钮，使得所有的复选框呈现取消勾选的状态。
    function checkAll(){
        //获取所有复选框元素对象
        let hobbys = document.getElementsByName("hobby");
        //设置选中状态
        for (let i=0; i<hobbys.length;i++){
            const element=hobbys[i];
            element.checked=true;
        }
    }
    function reverse(){
        //获取所有复选框元素对象
        let hobbys = document.getElementsByName("hobby");
        //设置为未选中状态
        for (let i=0; i<hobbys.length;i++){
            const element=hobbys[i];
            element.checked=false;
        }
    }

    </script>
</body>
</html>
posted @ 2026-01-07 15:55  琬六岁  阅读(1)  评论(0)    收藏  举报