A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 白小托 中级黑马   /  2019-8-30 15:43  /  1145 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
        * 造句:  xxx被xxx,我就xxx
                * 我方水晶被摧毁后,我就责备对友。
                * 敌方水晶被摧毁后,我就夸奖自己。

* 如何绑定事件
        1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
                1. 事件:onclick--- 单击事件

        2. 通过js获取元素对象,指定事件属性,设置一个函数

        * 代码:
                <body>
                        <img id="light" src="img/off.gif"  onclick="fun();">
                        <img id="light2" src="img/off.gif">
                       
                        <script>
                            function fun(){
                                alert('我被点了');
                                alert('我又被点了');
                            }
                       
                            function fun2(){
                                alert('咋老点我?');
                            }
                       
                            //1.获取light2对象
                            var light2 = document.getElementById("light2");
                            //2.绑定事件
                            light2.onclick = fun2;
                       
                       
                        </script>
                </body>

* 案例1:电灯开关
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>电灯开关</title>
       
        </head>
        <body>
       
        <img id="light" src="img/off.gif">
       
        <script>
            /*
                分析:
                    1.获取图片对象
                    2.绑定单击事件
                    3.每次点击切换图片
                        * 规则:
                            * 如果灯是开的 on,切换图片为 off
                            * 如果灯是关的 off,切换图片为 on
                        * 使用标记flag来完成
       
             */
       
            //1.获取图片对象
            var light = document.getElementById("light");
            var flag = false;//代表灯是灭的。 off图片
            //2.绑定单击事件
            light.onclick = function(){
                if(flag){//判断如果灯是开的,则灭掉
                    light.src = "img/off.gif";
                    flag = false;
       
                }else{
                    //如果灯是灭的,则打开
       
                    light.src = "img/on.gif";
                    flag = true;
                }
       
       
            }
            
        </script>
        </body>
        </html>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马