JavaWeb——JavaScript（4/4）- JS事件监听：事件绑定、常见事件、案例（原始代码，完整代码，最终效果）

qiyi.sky

于 2024-09-10 08:00:00 发布

阅读量387

点赞数 5

分类专栏： JavaWeb 文章标签：前端 java 学习开发语言笔记 javascript

本文链接：https://blog.csdn.net/li13437542099/article/details/140618149

版权

JavaWeb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件绑定

事件绑定是将特定的事件（如点击、鼠标移动、键盘按键按下等）与相应的处理函数关联起来的过程。当指定的事件在对应的元素上发生时，与之绑定的处理函数就会被调用执行，以实现相应的功能或操作。

方式一：通过HTML标签中的事件属性进行绑定

<body>
    <input type="button" value="按钮1" onclick="on()">
</body>
<script>
    function on(){
        alert("我被点击了！");
    }
</script>

方式二：通过DOM元素属性绑定

<body>
    <input type="button" value="按钮1" onclick="on()" id="btn">
</body>
<script>
    document.querySelector("#btn").onclick = function(){
        alert("我被点击了！");
    }
</script>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

<!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>事件-常见事件</title>
</head>
<body>
    <input type="text" onmouseover="over()" onmouseout="out()">
</body>
<script>
    function over(){
        console.log("鼠标移进来了");
    }
    function out(){
        console.log("鼠标移出去了");
    }
</script>
</html>

案例

通过事件监听及DOM操作，完成如下效果实现。

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

原始代码

<!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>事件-案例</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="SKY" >
    <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>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    



</script>
</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>事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

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

    <br> <br>

    <input type="text" id="name" value="SKY" 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()">

</body>

<script>

    //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";
    }



    //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();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ;  -- onclick
    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 = (element.checked) ? false : true;
        }
    }



</script>
</html>