18.事件基础，event对象，clientX,clientY,keyCode

事件对象：event；用于获取事件的信息，如：clientX,clientY,keyCode,等；

 var oEvent=ev||event;  //ev在ie下需要传参数ev ，event,在firefox,chrome下；

function(ev){

　　var oEvent=ev||event;

}

document.onclick;document是html和<!Doctype>的父节点；当要在浏览器窗口界面任意点上触发事件时，用document.

事件冒泡：一个对象触发事件后，会向它的包含对象传递，触发包含对象的事件；

取消冒泡：在最初触发事件的对象里取消冒泡，oEvent.cancelBubble=true;

跟按键相关的事件：onkeydown,onkeyup ,onkeypress;

oEvent.keyCode  按键对应的码；

ctrlKey,altKey,shiftKey返回true or false;

 仿下拉列表：

点击按钮，div显示，在空白处任意点点击，div消失。用到取消冒泡，使得点击按钮后到外围对象上的冒泡被取消。

 

<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function (ev)
    {
        var oEvent=ev||event;
        
        oDiv.style.display='block';
        //alert('按钮被点击了');
        
        oEvent.cancelBubble=true;
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('document被点击了');
    };
};
</script>

 

 按键提交信息：

用Enter+Ctrl键，提交信息；

可以用if条件判断，如果oEvent.keyCode=13 && oEvent.ctrlKey==true;,则在文本域中显示信息；

js代码

<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13 && oEvent.ctrlKey)
        {
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};
</script>

 div跟随鼠标移动：

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

oDiv.style.left=oEvent.clientX+scrollLeft+'px';//鼠标的绝对位置；

oDiv.style.top=oEvent.clientY+scrollTop+'px';

<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    var pos=getPos(oEvent);
    
    oDiv.style.left=pos.x+'px';
    oDiv.style.top=pos.y+'px';
};
</script>

一串div跟随鼠标：

后一个div的位置等于前一个的位置

第一个div等于鼠标的位置；

<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;
    
    var pos=getPos(oEvent);
    
    for(var i=aDiv.length-1;i>0;i--)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }
    
    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};
</script>

键盘控制div移动：

← →↑↓判断按键对应的keyCode;

<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {
        
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>