08-JavaScript事件监听

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-事件-事件绑定</title>
</head>
<body>
    <!--点击按钮，在控制台打印相关信息-->
    <input type="button" value="事件绑定1" id="btn1" onclick="on()">
    <input type="button" value="事件绑定2" id="btn2">
</body>
<script>
    // 第一种方法，通过HTML标签中的属性绑定事件
    function on() {
        console.log("事件绑定1");
    }

    // 第二种方法，通过DOM元素绑定事件
    document.getElementById("btn2").onclick = function () {
        console.log("事件绑定2");
    }
</script>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-事件-常见事件</title>
</head>
<!--页面/元素加载后，触发load()方法-->
<body onload="load()">
    <!--表单提交后，触发subfn()方法-->
    <form action="" style="text-align: center" onsubmit="subfn()">
        <!--当文本框，失去焦点、获得焦点、键盘按下时触发相应的方法-->
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

        <input class="b1" type="submit" value="提交">
        <!--当按钮单击时，触发fn1()方法-->
        <input class="b1" type="button" value="单击事件" onclick="fn1()">
    </form>

    <br><br><br>

    <!--当鼠标移入、移出表格时，触发over()、out()方法-->
    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td>马铃薯</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>福西西</td>
            <td>18</td>
            <td>女</td>
        </tr>
    </table>
</body>
    <script>
        // 页面/元素加载完成后触发
        function load(){
            console.log("页面加载完成");
        }

        // 提交表单
        function subfn(){
            console.log("提交表单");
        }

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

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

        // 按键按下
        function kfn(){
            console.log("按键按下");
        }

        // 鼠标移入
        function over(){
            console.log("鼠标移入");
        }

        // 鼠标移出
        function out(){
            console.log("鼠标移出");
        }

        // 单击事件
        function fn1(){
            console.log("单击事件");
        }
    </script>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-事件-案例</title>
    <style>
        img{
            width: 150px;
            height: 200px;
            margin-left: 50px;
        }
        .btn {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            margin: 10px;
        }
        .cb {
            margin: 10px;
        }
        #t1{
            width: 220px;
            height: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <!--点击点亮按钮点亮灯泡，熄灭按钮熄灭灯泡-->
    <img src="img/off.png" id="light" alt="logo"><br>
    <input class="btn" type="button" value="点亮" onclick="light()">
    <input class="btn" type="button" value="熄灭" onclick="dark()">

    <br>
    <!--文本框，鼠标移入全部变为大写字母，移除变为小写字母-->
    <input id="t1" type="text" onmouseover="over()" onmouseout="out()">

    <!--全选按钮复选框全选，全不选按钮则相反-->
    <div class="cb">
        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏
    </div>
    <input class="btn" type="button" value="全选" onclick="Switch()">
    <input class="btn" type="button" value="全不选" onclick="UnSwitch()">

</body>
    <script>
        function light() {
            var img = document.getElementById("light");
            img.src = "img/on.png";
        }

        function dark() {
            var img = document.getElementById("light");
            img.src = "img/off.png";
        }

        function Switch() {
            var cbs = document.getElementsByName("hobby");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = true;
            }
        }

        function UnSwitch() {
            var cbs = document.getElementsByName("hobby");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = false;
            }
        }

        function over() {
            var txt = document.getElementsByTagName("input")[2];
            txt.value = txt.value.toLowerCase();
        }

        function out() {
            var txt = document.getElementById("t1");
            txt.value = txt.value.toUpperCase();
        }
    </script>
</html>

 

 

 

 

posted @ 2024-03-24 09:48  马铃薯1  阅读(21)  评论(0)    收藏  举报