事件类型-基本事件

一、UI事件

load 当页面完全加载后在window上触发图片也可以触发load事件

resize 当窗口大小变化时在window上触发

scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发

二、鼠标事件

1、事件类型

onclick 单击

ondblclick 双击

oncontextmenu 右键菜单

onmouseover 移入

onmouseout 移出

onmouseenter 移入

onmouseleave 移出

onmousedown 按下

onmouseup 抬起

onmousemove 移动

使用enter和leave  是因为 over和out 在进入、移出子级时会触发

代码

这种的是不适合的！！！！


window.onkeydown = function(e){
            var l = dOk.offsetLeft;
            var t = dOk.offsetTop;
                if(e.keyCode === 37){
                    l-=5;
                 }else if(e.keyCode === 38){
                    t-=5;
                 }else if(e.keyCode === 39){
                    l+=5;
                 }else if(e.keyCode === 40){
                    t+=5;
        }
                  dOk.style.left = l +"px";
                  dOk.style.top = t+"px";
        }

合适的代码如下：

//合适的打开方式 计时器+状态

    var isLeft = false;
    var isTop = false;
    var isRight = false;
    var isBottom = false;

    //计时器
    var timer = null;

    //键盘事件：只修改状态
    window.onkeydown = function(e){
        if(e.keyCode === 37){
            isLeft = true;
        }else if(e.keyCode === 38){
            isTop = true;
        }else if(e.keyCode === 39){
            isRight = true;
        }else if(e.keyCode === 40){
            isBottom = true;
        }
    }

    window.onkeyup = function(e){
        if(e.keyCode === 37){
            isLeft = false;
        }else if(e.keyCode === 38){
            isTop = false;
        }else if(e.keyCode === 39){
            isRight = false;
        }else if(e.keyCode === 40){
            isBottom = false;
        }
    }
    
    //通过计时器实现移动
    timer = setInterval(function(){
        var l =dOk.offsetLeft;
        var t =dOk.offsetTop;

        if(isLeft){ l-=5;}
        if(isTop){ t-=5;}
        if(isRight){ l+=5;}
        if(isBottom){ t+=5;}

        dOk.style.left = l +"px";
        dOk.style.top = t+"px";
    },30)

2、坐标位置

相对于Body:   clientX 表示事件发生时鼠标指针在视口中的水平坐标

                       clientY 在视口中的垂直坐标

三、键盘事件

keydown  当用户按下键盘上的任意键时触发，按住不动将重新触发

keyup  当用户释放键盘上的键时触发

event.keyCode 键码