事件简单学习和案例_点灯开关

功能:某些组件被执行了某些操作后，触发某些代码的执行。

　　造句:xxx被xxx,我就xxx

　　我方水晶被摧毁后，我就责备对友。

　　地方水晶被摧毁后，我就夸奖自己。

如何绑定事件

1。直接在html标签上，指定事件的属性(操作)，属性值就是js代码

　　事件: onclick---单击事件

2．通过js获取元秦对象，指定事件属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img id="light" src="img/11.jpg" onclick="fun();">
    <img id="light1" src="img/11.jpg">

    <script>
        function fun() {
            alert('我被点了')
        }

        function fun2() {
            alert("我又被点了")
        }

        var light2 = document.getElementById("light1");
        light2.onclick = fun2;

    </script>



</body>
</html>

案例_点灯开关

获取图片对象

绑定单击事件

每次点击切换图片

规则：

　　如果灯是开的 on切换图片为 off

　　如果灯是关的 off切换图片为 on

使用标记flag来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/11.jpg">

    <script>
        var light = document.getElementById("light");
        var flag = false;
        light.onclick = function () {
            if(flag){
                light.src = "img/11.jpg";
                flag = false;
            }else {
                light.src = "img/22.jpg";
                flag = true;
            }

        }
    </script>
</body>
</html>

posted on 2022-08-03 16:05 淤泥不染阅读(23) 评论(0) 编辑收藏举报