2015.8.3-20js(event事件对象和键盘事件)

1.document代表是整个页面，比如鼠标坐标一般用document,用body也可以，但body里的内容必须撑起。

2.event对象，IE用event，FF与chrome有event参数；(获取鼠标在页面的坐标)

document.onclick = function(ev){
　　var oEvent = ev || event;
　　alert(oEvent.clientX + "," + oEvent.clientY);
}

3.阻止事件冒泡，cancelBubble = true;   取消事件冒泡和默认行为return false;

4.获取鼠标坐标的在可视区的位置(div元素跟着鼠标坐标移动)

document.onmousemove = function(ev){
　　var oEvent = ev || event;　　　　//事件对象

　　//获取垂直滚动条的位置
　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
　　//获取水平滚动条的位置，很少用动水平滚动条
　　var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

　　//跟着鼠标移动
　　obj.style.left = oEvent.clientX + "px";
　　obj.style.top = oEvent.clientY + scrollTop + "px";
}

5.封装获取scrollTop滚动条和client鼠标坐标，以json形式返回，凡用到client鼠标坐标的情况都要加scrollTop来兼容

function getClientPosition(ev){
　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
　　var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

　　//以json形式返回
　　return {x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop};
}
//调用时只需obj.x和obj.y即可得到鼠标坐标

6.小程序(一串div跟着鼠标走)

原理是：onmousemove事件，获取鼠标坐标，后一个div跟着前一个div，第一个div跟着鼠标走

document.onmousemove = function(ev){
　　var oEvent = ev || event;
　　var pos = getClientPosition(oEvent);　　//获取鼠标坐标
　　for(var i = aDiv.length-1; i > 0; i--){
　　　　//后一个div跟着前一个div走
　　　　aDiv[i].style.left = aDiv[i-1].offsetLeft + "px";
　　　　aDiv[i].style.top = aDiv[i-1].offsetTop + "px";
　　　　//第一个div跟着鼠标走
　　　　aDiv[0].style.left = pos.x + "px";
　　　　aDiv[0].style.top = pos.y + "px";
　　}
}

 7.onkeydown键盘事件，keyCode检测按键；(键盘方向键控制div移动,连按有卡顿)

document.onkeydown = function(ev){
　　var oEvent = ev || event;

　　//左，上，右，下方向键
　　if(oEvent.keyCode == 37){
　　　　obj.style.left = oDiv.offsetLeft -10 + "px";
　　}else if(oEvent.keyCode == 38){
　　　　obj.style.top = oDiv.offsetTop -10 + "px";
　　}else if(oEvent.keyCode == 39){
　　　　obj.style.top = oDiv.offsetLeft +10 + "px";
　　}else if(oEvent.keyCode == 40){
　　　　obj.style.top = oDiv.offsetTop +10 + "px";
　　}
}

10.ctrl+回车

inputText.onkeydown = function(ev){
        var oEvent = ev || event;
        if(oEvent.keyCode == 13 && oEvent.ctrlKey){
            resultText.value += inputText.value + "\n";
            inputText.value = "";
        }
    }