zoukankan      html  css  js  c++  java
  • JavaScript 9—事件

    事件对象

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #areaDiv {
                width: 300px;
                height: 100px;
                border: 1px solid black;
                margin-bottom: 10px;
            }
    
            #showMsg {
                width: 300px;
                height: 30px;
                border: 1px solid black;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                // 当鼠标在areaDiv中移动时,在showMsg中来显示鼠标的坐标
                // 获取两个div
                var areaDiv = document.getElementById("areaDiv");
                var showMsg = document.getElementById("showMsg");
    
                /*
                    onmousemove
                        该事件将会在鼠标在元素中移动时被触发
    
                    事件对象    
                        当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
                            在事件对象中封装了当前时间相关的一切信息,比如:鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向...
    
                */
                areaDiv.onmousemove = function (event) {
                    // alert(event);
    
                    /*
                        在IE8中,响应函数被触发时,浏览器不会传递事件对象,
                         在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
                    */
                    // if (!event) {
                    //     event = window.event;
                    // }
    
                    //解决事件对象兼容性问题
                    event = event || window.event;
    
                    /*
                        clientX可以获取鼠标指针的水平坐标
                        clientY可以获取鼠标指针的垂直坐标
                    */
                    var x = window.event.clientX;
                    var y = window.event.clientY;
    
                    // alert("x = " + x + " , y = " + y);
    
                    // 在showMsg中显示鼠标的坐标
                    showMsg.innerHTML = "x = " + x + " , y = " + y;
                }
            }
        </script>
    </head>
    
    <body>
        <div id="areaDiv"></div>
        <div id="showMsg"></div>
    </body>
    
    </html>

     div随鼠标事件移动

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                /* 开启box1的绝对定位 */
                position: absolute;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                // 使div可以跟随鼠标移动
    
                // 获取box1
                var box1 = document.getElementById("box1");
                // 绑定鼠标移动事件
                document.onmousemove = function (event) {
                    // 解决兼容问题
                    event = event || window.event;
    
                    // 获取滚动条滚动的距离
                    /*
                        chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
                        火狐等浏览器认为浏览器的滚动条是html的
                    */
                    // var st = document.body.scrollTop;
                    // var st = document.documentElement.scrollTop;
                    var st = document.body.scrollTop || document.documentElement.scrollTop;
                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
    
    
                    // 获取到鼠标的坐标
                    /*
                        clientX和clientY
                         用于获取鼠标在当前的可见窗口的坐标
                        div的偏移量是相对于整个页面的
    
                        pageX和pageY可以获取鼠标相对于当前页面的坐标
                         但是这两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用
                    */
                    var left = event.clientX;
                    var top = event.clientY;
    
                    // 设置div的偏移量
                    box1.style.left = left + sl + "px";
                    box1.style.top = top + st + "px";
    
                }
            }
        </script>
    </head>
    
    <body style="height: 1000px;  2000px;">
        <div id="box1"></div>
    </body>
    
    </html>

     事件的冒泡

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
    
            }
    
            #s1 {
                background-color: yellow;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                /*
                    事件的冒泡(Bubble)
                        所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
                        在开发中冒泡一般都是有用的,如果不希望发生事件冒泡可以通过对象来取消冒泡
                */
    
    
                //为s1绑定一个单击响应函数
                var s1 = document.getElementById("s1");
                s1.onclick = function (event) {
                    event = event || window.event;
                    alert("我是span的单击响应函数");
    
                    // 取消冒泡
                    // 可以将事件对象的cancelBubble设置为true,即可取消冒泡
                    event.cancelBubble=true;
                };
    
                //为box1绑定一个单击响应函数
                var box1 = document.getElementById("box1");
                box1.onclick = function (event) {
                    event = event || window.event;
                    alert("我是div的单击响应函数");
                    event.cancelBubble=true;
                };
    
                //为body绑定一个单击响应函数
                document.body.onclick = function () {
                    alert("我是body的单击响应函数");
                };
    
            }
        </script>
    </head>
    
    <body>
        <div id="box1">
            我是box1
            <span id="s1">我是一个span</span>
        </div>
    </body>
    
    </html>

     事件的委派

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                var ul = document.getElementById("ul");
    
                // 点击按钮以后添加超链接
                var btn01 = document.getElementById("btn01");
    
                btn01.onclick = function () {
                    //创建一个li
                    var li = document.createElement("li");
                    li.innerHTML = "<a href='javascrigt:;' class= 'link' >新建的超链接</a>";
                    //将li添加到ul中
                    ul.appendChild(li);
                };
    
    
                /*
                    为每一个超链接都绑定一个单击响应函数
                     这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦
                      而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定
                */
                // 获取所有a
                var allA = document.getElementsByTagName("a");
                // 遍历
                // for (var i = 0; i < allA.length; i++) {
                //     allA[i].onclick = function () {
                //         alert("我是a的单击响应函数!!!")
                //     }
                // }
    
                /*
                    我们希望,只绑定一次事件,既可应用到多个的元素上,即使元素是后添加的
                     我们可以尝试将其绑定给元素的共同的祖先元素
    
                    事件的委派
                        指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
                            从而通过祖先元素的响应函数来处理事件。
                        事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
    
                */
    
                // 为ul绑定一个单击响应函数
                ul.onclick = function (event) {
                    event = event || window.event;
                    // alert("我是ul的单击响应函数");
    
                    /*
                        target
                            event中的target表示触发事件的对象
                    */
    
                    // 如果触发的事件是我们期望的元素就执行,否则不执行
                    if (event.target.className == "link") {
                        alert("我是ul的单击响应函数");
                    }
    
                }
            }
        </script>
    </head>
    
    <body>
        <button id="btn01">添加超链接</button>
    
        <ul id="ul" style="background-color: #bfa;">
            <li><a href="javascript: ;" class="link">超链接一</a></li>
            <li><a href="javascript: ;" class="link">超链接二</a></li>
            <li><a href="javascript: ;" class="link">超链接三</a></li>
        </ul>
    
    </body>
    
    </html>

     事件的绑定

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                /*
                    点击按钮以后弹出一个内容
                */
                //获取按钮对象
                var btn01 = document.getElementById("btn01");
    
                /*
                    使用对象.事件 = 函数 的形式绑定响应函数
                      它只能同时为一个元素的一个事件绑定一个响应元素
                      不能绑定多个,如果绑定了多个,则后边会覆盖掉前面的
                */
    
                // //为btn01绑定一个单击响应函数
                // btn01.onclick = function () {
                //     alert(1);
                // };
    
                // //为btn01绑定第二个响应函数
                // btn01.onclick = function () {
                //     alert(2);
                // };
    
                /*
                    addEventListener()
                        通过这个方法也可以为元素绑定响应函数
                        参数:
                            1.事件的字符串,不要on
                            2.回调函数,当事件触发时该函数会被调用
                            3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
    
                    使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
                        这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
    
                    这个方法不支持IE8及以下的浏览器
                */
                // btn01.addEventListener("click", function () {
                //     alert(1);
                // }, false);
                // btn01.addEventListener("click", function () {
                //     alert(2);
                // }, false);
    
                /*
                    attachEvent()
                        在IE8中可以使用attachEvent()来绑定事件
                    参数:
                        1.事件的字符串,要on
                        2.回调函数
    
                    这个方法也可以同时为一个事件绑定多个处理函数,
                    不同的是它是后绑定先执行,执行顺序和addEventListener()相反
    
                */
                // btn01.attachEvent("onclick", function () {
                //     alert(1);
                // });
                // btn01.attachEvent("onclick", function () {
                //     alert(2);
                // });
    
                bind(btn01, "click", function () {
                    alert(1);
                });
                bind(btn01, "click", function () {
                    alert(2);
                });
    
                /*
                    定义一个函数,用来为指定元素绑定响应函数
    
                    addEventListener()中的this,是绑定事件的对象
                    attachEvent()中的this,是window
                     需要统一两个方法this
    
                    参数:
                        obj要绑定事件的对象
                        eventStr事件的字符串(不要on)
                        callback回调函数
                */
                function bind(obj, eventStr, callback) {
                    if (obj.addEventListener) {
                        //大部分浏览器兼容的方式
                        obj.addEventListener(eventStr, callback, false);
                    } else {
                        /*
                            this是由调用方式决定的
                             callback.call(obj)
                        */
                        //IE8及以下
                        obj.attachEvent("on" + eventStr, function () {
                            // 在匿名函数中调用回调函数
                            callback.call(obj);
                        });
                    }
    
                }
            }
        </script>
    </head>
    
    <body>
        <button id="btn01">点我一下</button>
    
    
    </body>
    
    </html>

    事件的传播 

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 300px;
                height: 300px;
                background-color: yellowgreen;
            }
    
            #box2 {
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            #box3 {
                width: 150px;
                height: 150px;
                background-color: skyblue;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                //分别为三个div绑定单击响应函数
                var box1 = document.getElementById("box1");
                var box2 = document.getElementById("box2");
                var box3 = document.getElementById("box3");
    
                /*
                    事件的传播
                        关于事件的传播网景公司和微软公司有不同的理解
                            微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
                                然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
                            网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
                                然后在向内传播给后代元素
    
                        W3C综合了两个公司的方案,将事件传播分成了三个阶段
                            1.捕获阶段
                                在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
                            2.目标阶段
                                事件捕获到目标元素,捕获结束开始在目标元素上触发事件
                            3.冒泡阶段
                                事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
    
                        如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
                            一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
                            
                        IE8及以下的浏览器中没有捕获阶段
    
                */
    
                bind(box1, "click", function () {
                    alert("我是box1的响应函数")
                });
                bind(box2, "click", function () {
                    alert("我是box2的响应函数")
                });
                bind(box3, "click", function () {
                    alert("我是box3的响应函数")
                });
    
    
                function bind(obj, eventStr, callback) {
                    if (obj.addEventListener) {
                        //大部分浏览器兼容的方式
                        obj.addEventListener(eventStr, callback, false);
                    } else {
                        /*
                            this是由调用方式决定的
                             callback.call(obj)
                        */
                        //IE8及以下
                        obj.attachEvent("on" + eventStr, function () {
                            // 在匿名函数中调用回调函数
                            callback.call(obj);
                        });
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3">
    
                </div>
            </div>
        </div>
    </body>
    
    </html>

     拖拽

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
    
            #box2 {
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
    
                left: 200px;
                top: 200px;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                //分别为两个按钮绑定单击响应函数
                var btn01 = document.getElementById("btn01");
                var btn02 = document.getElementById("btn02");
                btn01.onclick = function () {
                    alert(1);
                }
                btn02.onclick = function () {
                    alert(2);
                }
                //设置btn01对鼠标按下相关的事件进行捕获
                //当调用一个元素的setCapture()方法以后,这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
                if (btn01.setCapture) {
                    btn01.setCapture();
                }
    
    
                /*
                    拖拽box1元素
                        拖拽的流程
                            1.当鼠标在被拖拽元素上按下时,开始拖拽
                            2.当鼠标移动时被拖拽元素跟随鼠标移动
                            3.当鼠标松开时,被拖拽元素固定在当前位置
                */
    
                // 获取box1
                var box1 = document.getElementById("box1");
                // 获取box2
                var box2 = document.getElementById("box2");
                drag(box1);
                drag(box2);
    
                // 为box1绑定一个鼠标按下事件
                // 当鼠标在被拖拽元素上按下时,开始拖拽
                // box1.onmousedown = function (event) {
                //     // alert("鼠标按下,开始拖拽~~");
    
                //     // 设置box1捕获所有鼠标按下的事件
                //     /*
                //         setCapture( )
                //             只有IE支持,但是在火狐中调用时不会报错,
                //                 而如果使用chrome调用,会报错
    
                //     */
                //     // if (box1.setCapture) {
                //     //     box1.setCapture();
                //     // }
                //     // box1.setCapture && box1.setCapture();
    
                //     // event = event || window.event;
    
                //     // //div的偏移量 鼠标.clentX - 元素.offsetLeft
                //     // //div的偏移量 鼠标.clentY - 元素.offsetTop
                //     // var ol = event.clientX - box1.offsetLeft;
                //     // var ot = event.clientY - box1.offsetTop;
    
                //     //为document绑定一个onmousemove事件
                //     // document.onmousemove = function (event) {
                //     //     event = event || window.event;
                //     //     //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
                //     //     //获取鼠标的坐标
                //     //     var left = event.clientX - ol;
                //     //     var top = event.clientY - ot;
                //     //     //修改box1的位置
                //     //     box1.style.left = left + "px";
                //     //     box1.style.top = top + "px";
                //     // };
    
                //     // //为元素绑定一个鼠标松开事件
                //     // document.onmouseup = function () {
                //     //     //当鼠标松开时,被拖拽元素固定在当前位置onmouseup
    
                //     //     //取消document的onmousemove事件
                //     //     document.onmousemove = null;
                //     //     //取消document的onmouseup事件
                //     //     document.onmouseup = null;
                //     //     //当鼠标松开时,取消对事件的捕获
                //     //     // if(box1.releaseCapture){
                //     //     //     box1.releaseCapture();
                //     //     // }
                //     //     box1.releaseCapture && box1.releaseCapture();
    
                //     // };
    
                //     // /*
                //     //     当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
                //     //         此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
                //     //         如果不希望发生这个行为,则可以通过return false来取消默认行为
    
                //     //     但是这招对IE8不起作用
                //     // */
                //     // return false;
    
                // };
    
                /*
                    提取一个专门用来设置拖拽的函数
                        参数:开启拖拽的元素
                */
                function drag(obj) {
    
                    event = event || window.event;
    
                    //div的偏移量 鼠标.clentX - 元素.offsetLeft
                    //div的偏移量 鼠标.clentY - 元素.offsetTop
                    var ol = event.clientX - obj.offsetLeft;
                    var ot = event.clientY - obj.offsetTop;
    
                    obj.onmousedown = function (event) {
                        // alert("鼠标按下,开始拖拽~~");
    
                        // 设置box1捕获所有鼠标按下的事件
                        /*
                            setCapture( )
                                只有IE支持,但是在火狐中调用时不会报错,
                                    而如果使用chrome调用,会报错
        
                        */
                        if (obj.setCapture) {
                            obj.setCapture();
                        }
                        // obj.setCapture && obj.setCapture();
    
                        event = event || window.event;
    
                        //div的偏移量 鼠标.clentX - 元素.offsetLeft
                        //div的偏移量 鼠标.clentY - 元素.offsetTop
                        var ol = event.clientX - obj.offsetLeft;
                        var ot = event.clientY - obj.offsetTop;
    
                        //为document绑定一个onmousemove事件
                        document.onmousemove = function (event) {
                            event = event || window.event;
                            //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
                            //获取鼠标的坐标
                            var left = event.clientX - ol;
                            var top = event.clientY - ot;
                            //修改box1的位置
                            obj.style.left = left + "px";
                            obj.style.top = top + "px";
                        };
    
                        //为元素绑定一个鼠标松开事件
                        document.onmouseup = function () {
                            //当鼠标松开时,被拖拽元素固定在当前位置onmouseup
    
                            //取消document的onmousemove事件
                            document.onmousemove = null;
                            //取消document的onmouseup事件
                            document.onmouseup = null;
                            //当鼠标松开时,取消对事件的捕获
                            if (obj.releaseCapture) {
                                obj.releaseCapture();
                            }
                            // obj.releaseCapture && obj.releaseCapture();
    
                        };
    
                        /*
                            当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
                                此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
                                如果不希望发生这个行为,则可以通过return false来取消默认行为
                        
                            但是这招对IE8不起作用
                        */
                        return false;
    
                    };
                }
            }
        </script>
    </head>
    
    <body>
        我是一段文字
    
        <div id="box1"></div>
        <div id="box2"></div>
    
        <button id="btn01">按钮01</button>
        <button id="btn02">按钮02</button>
    </body>
    
    </html>

     滚轮事件

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                //获取id为box1的div
                var box1 = document.getElementById("box1");
                //为box1绑定一个鼠标滚轮滚动的事件
                /*
                    onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
                     但是火狐不支持该属性
    
                    在火狐中需要使用DOMMouseScroll来绑定滚动事件
                     注意该事件需要通过addEventListener()函数来绑定
                */
                // function fun() {
                //     alert("滚了~~");
                // }
                // box1.onmousewheel = fun;
                // bind(box1, "DOMMouseScroll", fun);
                box1.onmousewheel = function (event) {
                    /*
                        当鼠标滚轮向下滚动时,box1变长
                        当滚轮向,上滚动时,box1变短
                    */
    
                    // alert("滚了~~");
    
                    event = event || window.event;
    
                    //判断鼠标滚轮滚动的方向
                    /*
                        event.wheelDelta 可以获取鼠标滚轮滚动的方向
                            向上滚120向下滚-120
                            wheelDelta这个值我们不看大小,只看正负
        
                        wheelDelta这个属性火狐中不支持
                            在火狐中使用event.detail来获取滚动的方向
                            向上滚-3向下滚3
        
                    */
                    // alert(event.wheelDelta);
                    // alert(event.detail);
    
                    //判断鼠标滚轮滚动的方向
                    if (event.wheelDelta > 0 || event.detal < 0) {
                        // alert("向上滚");
    
                        box1.style.height = box1.clientHeight - 100 + "px";
                    } else {
                        // alert("向下滚");
    
                        box1.style.height = box1.clientHeight + 100 + "px";
                    }
                };
                bind(box1, "DOMMouseScroll", box1.onmousewheel);
    
                /*
                    当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
                        这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
    
                    使用addEventListener( )方法绑定响应函数,取消默认行为时不能使用return false
                        需要使用event来取消默认行为event.preventDefault()
                       但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
     
                */
                event.preventDefault && event.preventDefault();
                return false;
            }
        </script>
    </head>
    
    <body style="height: 2000px;">
        <div id="box1"></div>
    </body>
    
    </html>

     键盘事件

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                /*
                    键盘事件:
                      onkeydown
                        按键被按下
                        对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
                        当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快
                            这种设计是为了防止误操作的发生。
                      onkeyup
                        按键被松开
    
    
                    键盘事件一般都会绑定给一些可以获取到焦点的对象
                */
    
                document.onkeydown = function (event) {
                    event = event || window.event;
                    /*
                        可以通过keyCode来获取按键的编码
                        通过它可以判断哪个按键被按下
                        除了keyCode,事件对象中还提供了几个属性
                          altKey
                          ctrlKey
                          shiftKey
                            这个三个用来判断alt、ctrl和shift是否被按下
                              如果按下则返回true,否则返回false
    
                    */
                    // console.log(event.keyCode);
    
                    // 判断y是否被按下
                    // if (event.keyCode == 89) {
                    //     console.log("y被按下了");
                    // }
    
                    //判断y和ctr1是否同时被按下
                    if (event.keyCode === 89 && event.ctrlKey) {
                        console.log("ctrl和y都被按下了");
                    }
    
    
                };
    
                // document.onkeyup = function () {
                //     console.log("按键松开了");
                // };
    
                //获取input
                var input = document.getElementsByTagName("input")[0];
                input.onkeydown = function (event) {
                    event = event || window.event;
                    // console.log("按键被按下了");
                    // 数字48 - 57
                    // 使文本框中不能输入数字
                    if (event.keyCode >= 48 && event.keyCode <= 57) {
                        //在文本框中输入内容,属于onkeydown的默认行为
                        //如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
                        return false;
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <!-- <div style=" 100px; height: 100px; background-color: red;"></div> -->
    
        <input type="text" />
    </body>
    
    </html>

     键盘移动div

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    
        <script type="text/javascript">
            window.onload = function () {
                //使div可以根据不同的方向键向不同的方向移动
                /*  
                    按左键,div向左移
                    按右键,div向右移
                */
                //为document绑定一个按键按下的事件
                document.onkeydown = function (event) {
                    event = event || window.event;
                    /*
                        37左
                        38上
                        39右
                        40下
                    */
                    // console.log(event.keyCode);
    
                    // 定义一个变量,来表示移动的速度
                    var speed = 10;
    
                    //当用户按了ctrl以后,速度加快
                    if (event.ctrlKey) {
                        speed = 50;
                    }
    
                    switch (event.keyCode) {
                        case 37:
                            // alert("向左"); left值减小
                            box1.style.left = box1.offsetLeft - speed + "px";
                            break;
                        case 39:
                            // alert("向右");
                            box1.style.left = box1.offsetLeft + speed + "px";
                            break;
                        case 38:
                            // alert("向上");
                            box1.style.top = box1.offsetTop - speed + "px";
                            break;
                        case 40:
                            // alert("向下");
                            box1.style.top = box1.offsetTop + speed + "px";
                            break;
                    }
    
                };
    
    
            }
        </script>
    </head>
    
    <body>
        <div id="box1"></div>
    </body>
    
    </html>
    转载请注明出处:https://www.cnblogs.com/stu-jyj3621
  • 相关阅读:
    POI Excel解析
    mysql忘记root密码的解决方法
    注解实现AOP
    Java 集合类
    easyui-textbox 绑定事件
    MarqueeLabel 跑马灯
    Swift-2.14构造过程
    Swift-2.13继承
    Swift- 2.12下标脚本
    Swift-2.11方法
  • 原文地址:https://www.cnblogs.com/stu-jyj3621/p/13414233.html
Copyright © 2011-2022 走看看