事件捕获与键盘事件-优快云博客

本文介绍了事件捕获机制及如何使用JavaScript实现键盘事件监听，包括事件流的概念、事件捕获与冒泡的区别，以及如何利用键盘事件控制页面元素如div进行移动。

事件捕获

<!DOCTYPE html>
<html lang="en">
<head
    <meta charset="UTF-8">
    <title>事件捕获</title>
    <style type="text/css">

        div{padding: 50px;}
        #div1{background: #1836EC;}
        #div2{background: #D43434;}
        #div3{background: #CFF6AE;}

    </style>
</head>
<script>

    /*
        obj.addEventListener(事件名称,事件函数,是否捕获)

        当一个元素获取到一个事件的时候，事件流会从外一直直达该元素，然后再返回出去，有点类似于作用力与反作用力


        是否捕获

        false   事件冒泡 监听出去的事件流

        true    事件捕获 监听进来的事件流

    */

window.onload=function (){

        var oDiv1=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');
        var oDiv3=document.getElementById('div3');


        function fn(){


            alert(this.id);
        }


        // oDiv1.addEventListener('click', fn, false);
        // oDiv2.addEventListener('click', fn, false);
        // oDiv3.addEventListener('click', fn, false);

        // oDiv1.addEventListener('click', fn, true);
        // oDiv2.addEventListener('click', fn, true);
        // oDiv3.addEventListener('click', fn, true);


        // oDiv1.addEventListener('click', fn, false);
        // oDiv2.addEventListener('click', fn, true);
        // oDiv3.addEventListener('click', fn, false);

};

</script>
<body>
    <div id="div1">1
        <div id="div2">2
            <div id="div3">3</div>
        </div>
    </div>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
<script type="text/javascript">

/*
    键盘事件 

    onkeydown：当键盘按下的时候触发

    onkeyup：当键盘抬起的时候触发


    键盘事件event对象下的一些属性

    event.keyCode： 返回按下的键值对应的ASCII值（数字类型的返回值）


    ctrlKey  shiftKey  altKey  布尔类型的返回值

    返回的是事件发生时该键的状态，未按下返回false，否则返回true


 */

 document.onkeydown=function (ev){

    var ev=ev||event;

    console.log(ev.keyCode);
    console.log(ev.ctrlKey);

 }



</script>

</body>
</html>

键盘事件应用键盘控制div移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style type="text/css">

        div{width: 100px;height: 100px;background: #f00;position: absolute;}

    </style>
</head>
<body>

<div></div>
<script>
    var oDiv=document.getElementsByTagName('div')[0];
    /*
        不是所有元素都能够接收键盘事件，能够相应用户输入的元素才能够接收键盘事件或者说是能获取焦点的元素    
        document 能获取焦点，所以可以通过document接收键盘事件来控制div的移动

        问题

        用js的键盘事件控制一个div移动，当按下一个方向键不放，div会先停顿一下，然后才开始持续移动,原因是系统要区分用户是否连续输入

        解决方案

        先开一个定时器，让div一直处于（往4个方向）准备移动的状态（初始4个方向的值都是false，div就保持在原地不动），当按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动，松开方向键，这个方向的值就改变为false , div就停止这个方向移动了

    */

    var left=false;
    var right=false;
    var itop=false;//top是window对象下的一个属性，不能用来做变量名
    var bottom=false;


    setInterval(function (){

        if(left){

            oDiv.style.left=oDiv.offsetLeft - 10 + 'px';

        }else if(itop){

            oDiv.style.top=oDiv.offsetTop - 10 + 'px';

        }else if(right){

            oDiv.style.left=oDiv.offsetLeft + 10 + 'px';

        }else if(bottom){

            oDiv.style.top=oDiv.offsetTop + 10 + 'px';
        }

    },50)

    document.onkeydown=function (ev){

        var ev=ev||event;
        switch(ev.keyCode){

            case 65:left=true;break;
            case 87:itop=true;break;
            case 68:right=true;break;
            case 83:bottom=true;break;
        }
    }

    document.onkeyup=function (ev){

        var ev=ev||event;
        switch(ev.keyCode){

            case 65:left=false;break;
            case 87:itop=false;break;
            case 68:right=false;break;
            case 83:bottom=false;break;
        }
    }

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