（javaweb）js事件监听

最新推荐文章于 2024-09-30 15:42:36 发布

勤奋的小王同学~

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量519

点赞数 12

分类专栏： javaweb 文章标签：前端

本文链接：https://blog.csdn.net/2301_79144798/article/details/140602157

版权

javaweb 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一.事件绑定

二.常见事件

三.事件案例

一.事件绑定

<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
    
<script>
    function on(){
        alert("按钮1被点击了");
    }
    document.getElementById("btn2").onclick=function(){
        alert("按钮2被点击了");
    }
</script>
</body>

二.常见事件

当body加载完成之后，会触发onload事件

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>

在控制台当中会显示输出结果

三.事件案例

<body>
    <img id="light" src="gif/off.gif" >
    <br> <br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
</body>
<script>
    function on(){
    var img=document.getElementById("light");
    img.src="gif/on.gif";
    
    }
    function off(){
    var img=document.getElementById("light");
    img.src="gif/off.gif";
    }
</script>

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

<script>
        function lower(){
        var input=document.getElementById("name");
        input.value=input.value.toLowerCase();
    }
    function upper(){
        var input=document.getElementById("name");
        input.value=input.value.toUpperCase();
    }
</script>

function checkAll(){
        var hobbys=document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked=true;
        }
    }
    function reverse(){
        var hobbys=document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked=false;
        }
    }

<br><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
<br><br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">

<!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="gif/off.gif" >
    <br> <br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br><br>
    <input type="text" id="name" value="WZTWZY" onfocus="lower()" onblur="upper()">

<br><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
<br><br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
    function on(){
    var img=document.getElementById("light");
    img.src="gif/on.gif";
    
    }
    function off(){
    var img=document.getElementById("light");
    img.src="gif/off.gif";
    }

    function lower(){
        var input=document.getElementById("name");
        input.value=input.value.toLowerCase();
    }
    function upper(){
        var input=document.getElementById("name");
        input.value=input.value.toUpperCase();
    }
    function checkAll(){
        var hobbys=document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked=true;
        }
    }
    function reverse(){
        var hobbys=document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked=false;
        }
    }

</script>
</html>